こんにちは、飲食店さんの集客サポーターことざんぷです。つい先日生まれた娘ですが、生後１０日ほど経過し、随分と顔つきが変わって来ました！生まれたてはまるでお猿さんだったのですが...ｗ 毎日大変なことばかりですが、日々の成長を感じつつ楽しんで子育てできたらと思います(・´з`・) さてさて本日は、ご依頼頂いているポータルサイト作成の中で実装した、「グローバルメニューのアイコン」の設置について。WordPressで作成中のサイトですが、プラグイン「Font Awesome 4 Menus」を使用して簡単に設置出来るので、その情報を今回はシェアしたいと思います。
こんな事が書かれてます
Font Awesome 4 Menusとは
「Font Awesome 4 Menus」は、 トップ（グローバル）、サイド、フッターの 各メニューに、アイコンフォントを設定出来る とても便利で簡単なプラグインです！ 自分でCSSをいじって設定することも出来ますが、 結構面倒だったりしますからね〜。 Font Awesome 4 Menusを使用すれば ５分でアイコン設定が完了します。 それでは使い方を説明していきますね。
Font Awesome 4 Menusの有効化
まずはいつも通り、 プラグイン＞新規追加、から 「Font Awesome 4 Menus」を検索し インストール＞有効化をして下さい。
CSSクラスにチェック
外観＞メニューから、 メニューの編集ページに移動します。 ページ右上に「表示オプション」 という項目がありますので、そこをクリックし 中にある「CSSクラス」にチェックを入れます。
CSSクラスを設定する
チェックを入れると、このようになります。
Before
After
画像の赤枠で囲った部分に アイコンのクラス名を入力することで メニューのテキスト前に 任意のアイコンが設定されます。
Font Awesome 4 Menusのクラス名
アイコン毎のクラス名は 公式サイトに一覧が載っています。 一部を画像でご紹介してみます。 
ここにあるだけでも結構な数ですが、 まだまだ沢山のアイコンが用意されています。 ちゃんと数えていませんが、 上の画像の5倍以上はありますね^^; かなり多いので、 テキスト検索を利用して 良さそうなアイコンを見つけてみましょう☆
Font Awesome 4 Menus使用上の注意
良さそうなアイコンを見つけて 設定が完了！でも表示されない... こんな時に見るべきポイントがあります。 それは...クラス名です！ 実は、一覧に表示されている名前を そのまま設定してしまうと 上手く表示されないのです。 一覧表示されたアイコンの中から どれか一つクリックしてみて下さい。 先程と違った名前が 大きめのフォントで表示されるはずです。 
どれも、先頭に「fa-」がついているんです。 つまり、これが抜けていたために 表示されなかったんですね。 （「fa-home」を「home」にしていた等） それ以外には落とし穴は無さそうなので もし上手く行かなかったときには そこを確認して見てください。
僕のサイトの実例
せっかくなので、 僕のサイトにも反映させてみます。
Before
元々これだったのが、
After
こんな感じになります！ いかがでしょうか、 随分と雰囲気が変わりますよね^^ アイコンの有無だけで、 ユーザビリティがグンッと上がりますので、 必要に応じて取り入れてみて下さい。
まとめ
- WordPressサイトのメニューアイコン設置は超簡単
- プラグインFont Awesome 4 Menusが便利すぎる
- アイコンフォントの数も豊富すぎる
