Cocoonのヘッダー・フッターモバイルボタンのFontAwesomeアイコンを任意の画像に置き換える

私が運営しているサイトの一つ、あかえほで、モバイルボタンをFontAwesome→自前のアイコンに置き換えたので、備忘録を残します。

FontAwesomeのバージョンは5を使用しています。

このカスタマイズは以下のフォーラムの回答をアレンジさせていただきました。

モバイルメニューを作成

まずは以下のページを参考にヘッダー・フッターモバイルボタンを設定します。

FontAwsomeのアイコンは、実際に自分が使いたいアイコン画像に近いものを選んでおきます。

ブログに使いたいアイコン画像を用意してメディアにアップロード

アイコン画像を準備してメディアにアップロードします。

※権利的に問題ない画像をご用意ください。

後でこの画像URLを使用します。

追加CSSまたは子テーマのスタイルシートにコードを追記

追加CSSについてはこちら。

例えば以下のFontAwsome5のハートのアイコンを任意のハートの画像に変えたい場合。

.menu-button .fa-heart:before {
	background-image: url( ここにお好きなハートの画像URLを貼り付け );
	background-position: center -2px;
	background-size: cover;
	content: '';
	display: block;
	height: 30px; /*アイコンの高さを指定*/
	width: 30px; /*アイコンの横幅を指定*/
}

音符のアイコンを任意の音符の画像に。

.menu-button .fa-music:before {
	background-image: url( ここにお好きな音符の画像URLを貼り付け );
	background-position: center -2px;
	background-size: cover;
	content: '';
	display: block;
	height: 30px; /*アイコンの高さを指定*/
	width: 30px; /*アイコンの横幅を指定*/
}

本のアイコンを任意の本の画像に。

.menu-button .fa-book:before {
	background-image: url( ここにお好きな本の画像URLを貼り付け );
	background-position: center -2px;
	background-size: cover;
	content: '';
	display: block;
	height: 30px; /*アイコンの高さを指定*/
	width: 30px; /*アイコンの横幅を指定*/
}

・・・と、こんな要領で。

1行目の「.fa-○○:before」の○○部分に、FontAwsomeのアイコン名を入れ、2行目の「url()」の()内に画像URLを貼り付けるだけです。

キャプション位置は以下のコードで調整を。

.menu-button .menu-caption {
	margin-top: -9px;
}

モバイルボタンの余白を調整したい場合は以下のコードで数字をお好きに変更してください。

.mobile-footer-menu-buttons {
	padding: 10px 0;
}

※うまく画像が変更されない場合は、他のCSSが干渉しているか、コードに余分なスペースが入ってしまっている場合があります。コードを追加CSSまたは子テーマのスタイルシートの一番下に追記した上で、一度スペースを全部削除して改行し直してみるなどの対応で反映されると思います。

補足

フォーラムの回答にあったコードは以下のような形になっています。

.menu-button:nth-of-type(4) .fa-star:before {
  background-image: url( ../icon.png );
  background-position: center -2px;
  background-size: cover;
  content: '';
  display: block;
  height: 30px;
  width: 26px;
}

CocoonはフッターモバイルボタンでFontAwsomeのアイコンを指定しない場合、スターのアイコンが表示されます。

フォーラムの相談内容は、まだFontAwsome5に無い𝕏（旧Twitter）のアイコンを代替の画像で表示したいというもので、フッターモバイルボタンの左から4番目のスターを任意の画像に変更できるコードでした。

.menu-button:nth-of-type(4)左から4番目の .fa-starスターのアイコンを:before{
background-image: url( ../icon.pngこのURLの画像に変更して );
…

こういうことですね。

このやり方でも良かったんですが、これだとアイコンの順番が固定になってしまい、入れ替えたいときに面倒だなと。

順序の指定を外してスターの部分を変えれば他のアイコンでも行けるかな？と思ってやってみたらできた、という流れでした。

実際に自分が使いたいアイコン画像に近いものをFontAwsomeから選ぶのは、単純にその方が分かりやすい＆管理しやすいからです。

ご参考まで。