本サイトは、現状、カテゴリー数が少ないこともあって、メニューのアイテム数が少なめです。少し寂しい感じがしたので、Font Awesomeのアイコンをメニューのアイテム名に追加しました。
メインメニューの設定については、以下の記事をご参照下さい。
https://www.blogging-life.com/how-to-setup-main-menu/
Font Awesomeアイコンをメニューバーのアイテム名に追加する方法
メニューにFont Awesomeを追加するプラグイン、Font Awesome 4 Menus をインストールし、有効化します。
WordPress管理画面左のメニューから、［外観］を選んで［メニュー］をクリックします。
メニュー編集画面の右上に表示されている”表示オプション”をクリックします。
表示されるアイテムの中の［CSS Class]をチェックします。
メニューアイテムのタブをクリックします。CSS class（オプション）の欄に、Awesome Fontのクラス名を追加します。
例：”ホーム”のラベル名の前にホームアイコンを追加する場合は、CSS classにfa-homeを入れます。
アイコン表示のオプション
ラベル名の後にアイコンを表示
”fa-アイコン名”の後に、”fa-after”を追加します。
アイコンを大きくする
”fa-アイコン名”の後に、”fa-fw fa-2x”を追加します。
アイコンをスピン表示する
Font Awesomeのアイコンをスピン（回転）表示させたい場合は、”fa-アイコン名”の後に、”fa-spin”を追加します。
Font Awesome 4 Menusの設定を変更する
Simplicityでは、Font Awesomeのスタイルシートをロードしているので、重複ロードを避けるため、Font Awesome 4 Menusではスタイルシートをロードしない設定に変更します。
WordPress管理画面のメニューから、［設定］をクリックして、サブメニューのFont Awesomeを選択します。
Load Font Awesome 4 From: （どこからロードするかの選択設定）の中から、”Don’t load Font Awesome 4’s stylesheet (use if you load Font Awesome 4 elsewhere on your site)”を選択します。（Simplicityでロードしたスタイルシートを使用します。）
設定は、以上です。
メニューにアイコンが加わると印象が少し変わります。よろしければ、試してみて下さい。
記事内でもFont Awesome アイコンを使えます！
本記事で紹介したプラグインのショートコードを使用して、記事やページでもFont Awesomeのアイコンを使うこともできます。使い方は以下の記事をご参照下さい。
コメントを残す（承認後表示されます）