今回は、
ヘッダーのメニューアイコン
の設定手順をまとめていきたいと思います！
設定箇所
今回の設定対象は「ヘッダー」です。
ヘッダーはサイト内では以下の箇所を示します。
▼設定対象：ヘッダー
Before / After
手順の記載に移る前に設定前後の変化をまとめておきます。
設定を行うことで、以下のように表示が変わります。
▼Before / After
手順
使用するアイコンフォントの設定
①Cocoon設定をクリック
②全体をクリック
③サイトアイコンフォントにてサイトで使用するアイコンフォントを選択
※使用するFont AwesomeのVerの設定です。
※このVerがアイコンフォントの設定にて重要な情報となるのでコード取得前に確認すること。
アイコンフォントのコード取得
※本ステップで使用している画面キャプチャは、操作説明のために Font Awesome 公式サイト から引用しています。①Font Awesomeのサイトを開く
②下にスクロールして検索バーまで移動する
③アイコンを検索
※検索する際は英語で行うこと
④表示させたいバージョンを選択
※ Font Awesome5の場合は、5.15.4
※「使用するアイコンフォントの設定」にて確認したVerで使用できるものを選ぶこと
⑤アイコンをクリック
※PRO表記があるアイコンは有料のため注意
⑥コードの上でクリックをクリック
※クリックするとコピーされます
※Font Awesome5を設定しているサイトにて使用できるコードのため、他のVerを設定している 方は環境にあったVerのコードを取得してください。
使用したアイコンのコード
[home]
<i class="fas fa-home"></i>
[pen]
※ホーム以外のメニュー項目にて使用
<i class="fas fa-pen"></i>ナビゲーションラベルの設定
①メニューアイコンを設定する項目をクリック
②ナビゲーションラベル欄の項目名の前にFont Awesomeで取得したコードを挿入する
ナビゲーションラベルの記載例
<i class="fas fa-home"></i> ホーム
③メニューを保存をクリック
まとめ
【注意点】
WordPress内の設定とFont Awesomeにて取得したコードのVerが対応していないとメニューアイコンが表示できないため、注意が必要です。
私もここで苦戦しました・・・。WordPress内の設定は確認していたのですが、Font Awesome内で欲しいVerのコードをどのように取得するかわかっておらず、表示できるようになるまで苦労しました。
【気づき】
アイコンさえも自分で作成しなくても無料で使用できることに驚きました。慣れていないとアイコンを作成するだけでもかなり時間がかかるので、その時間が削減できるのはとても助かりますね！
コメント