Font Awesome 4 Menusでアイコンを表示させるには

ワードプレスのプラグインで結構人気なのが、【Font Awesome 4 Menus】です。これはヘッダーメニューの文字横にアイコンを表示させることができる、優れものです。文字だけのメニューでも問題ないのですが、かわいい小さなアイコンがあるだけで、結構見栄えも変わりますし、アイコンがそのカテゴリの意味を直感的に知らせてくれますので、認知的にも有効なプラグインであると思います。

さてさて、wordpressでFont Awesome 4 Menusのプラグインをインストールして、アイコンも選んだはいいが、なぜだかメニューにアイコンが表示されない。という場合があります。

二つブログを立ち上げて、二つともここで一度つまづきました(笑)

結局は簡単な設定でしたが、時間が経つと忘れてしまいますので、同じことがないようにこのブログでまとめておきます。

(1)Font Awesome 4 Menusを「プラグインを追加」からインストールします。

Font Awesome 4 Menus

(2)外観→メニューの画面で、右下の青いボタン【メニューの作成】を押します。

(3)次にメニュー設定のテーマの場所の<ヘッダーのナビゲーション>にチェックを入れて、【メニューの保存】を押します。Font Awesome 4 Menus2

(4)以上です(笑)これだけでした。

もちろんそれ以前の設定はマストです。

  • 外観ーメニューで表示オプションをクリックし、CSSクラスにチェックを入れる。
  • メニュー構造でそれぞれのページのCSS classに<fa-home>等を入力する。

でもこれだけでは表示されないのですね。メニューの作成・保存、ヘッダーのナビゲーションにチェックを入れて、初めて表示されるのですね。

ということでした!つまづいたら是非やってみてください。