footerアイコンの作成方法について

Question

写真のように、５つある中の真ん中のアイコンを大きくしたいのですが
footerのラインと重ねて表示することができません。。

どのようにすれば写真のような形のfooterができますでしょうか？

作成はpwaでhtml、cssコードでの作成です。

現状このようになっております↓

<!-- フッターの設定 -->
  <footer class="app_footer">
    <ul>
      <li>
        <div class="home_icon">
          <a href="shop.html"><i class="fas fa-home my-home fa-4x"></i></a>
        </div>
        <div id=shop_footer>
          ホーム
        </div>
      </li>

      <li>
        <div class="favorite_icon">
          <a href="shop_favorite.html"><i class="far fa-star my-shop fa-4x"></i></a>
          <div id=shop_footer>
            お気に入り
          </div>
        </div>
      </li>

      <li>
        <div class="menu_icon">
          <a href="shop_menu.html"><i class="fas fa-bars my- fa-8x"></i></a>
          <div id=shop_footer>
            メニュー
          </div>
        </div>
      </li>

      <li>
        <div class="purchase_history_icon">
          <a href="shop_purchase_history.html"><i class="fas fa-history fa-4x"></i></a>
            <div id=shop_footer>
              購入履歴
            </div>
        </div>
      </li>

      <li>
        <div class="profile_icon">
          <a href="profile.html"><i class="far fa-user-circle fa-4x"></i></a>
            <div id=shop_footer>
              プロフィール
            </div>
        </div>
      </li>

    </ul>
  </footer>

// フッターの固定
.app_footer {
  background-color: #fff;
  position: sticky;
  bottom: 0;

}


.my-home {
  color: #f49d3f;
}



// --　フッター　--
.app_footer ul {
    list-style: none; /*"."を消去*/
    display: flex; //横に並べる
    justify-content: space-around; //均等間隔に
    text-align: center;
    padding-top: 20px; //上に20pxスペースを空ける
    border-top:1px solid #AEAEAE;

  }

#shop_footer {
  font-size: 200%;  //文字サイズ
}

Comments

[x_x]

現状はどうなってますか？

[syyyow]

現状追記致しました><

[退会済みユーザー]

ソースは記載できますか？

[syyyow]

footerコードのみになりますが、記載いたしました！

Answer 1

補足ありがとうございました。

整えてないですが、このような感じでしょうか？

いろいろな方法があるかと思いますが、
私でしたら飛び出したい要素に対してposition: absolute;をかけてしまいます。

こんな感じに、、↓

.app_footer ul li:nth-child(3){
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 15px;
}

これに合わせて周辺のCSSも調整が必要になりますが、
ここまでコードがかけるようでしたら説明は不要かと思いましたので省かせていただきました！

Comments

[syyyow]

ありがとうございます！
無事にセンターアイコンのみ大きくすることができました！

フッターに関してまた聞きたいことは’別の質問にあげさせていただきますので
もし回答可能な内容でありましたらその際はまたよろしくお願い致します^^

[退会済みユーザー]

無事できたようで良かったです(^^)
ベストアンサーいただきありがとうございます♪