本サイトは、現状、カテゴリー数が少ないこともあって、メニューのアイテム数が少なめです。少し寂しい感じがしたので、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のアイコンを使うこともできます。使い方は以下の記事をご参照下さい。

https://www.blogging-life.com/adding-font-icon-in-post/