モバイルボタンのアイコンを画像に変更する方法

はじめに

モバイルボタンのメニューでは、通常Font Awesomeのアイコンしか設定できません。

そこで、アイコンではなく画像に変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

.menu-button:nth-child(n)のnを、必要に応じて追加、変更してください。
これは、モバイルボタンの何番目に画像を設定するかを指定するためのものです。

.mobile-menu-buttons {
  .menu-icon {
    background-size: cover;
    display: block;
    height: 28px;
    margin: auto;
    width: 28px;

    span {
      display: none;
    }
  }

  /* ヘッダーモバイルボタン */
  &.mobile-header-menu-buttons {
    .menu-button:nth-child(1) .menu-icon {
      background-image: url(画像URL);
    }
  }

  /* フィッターモバイルボタン */
  &.mobile-footer-menu-buttons {
    .menu-button:nth-child(1) .menu-icon {
      background-image: url(画像URL);
    }
  }
}

さいごに

今回紹介した方法を使えば、モバイルメニューのアイコンをFont Awesomeから任意の画像に変更できます。
より自由なデザイン調整が可能になるので、サイトの個性を出したい場合に活用してみてください。