Simplicityのナビバーにawesomeのアイコンを表示する方法

最近、他のブログを見ていて、トップメニューにアイコンを表示させたいなと思いました。そこで色々調べてみると私が思っていたトップメニューのことはナビゲーションメニューというとか、SimplicityではAwesomeというWebフォントを使っていて簡単に導入できるという事がわかりました。

というわけで今回はSimplicityのナビゲーションメニューにAwesomeのアイコンを表示する方法についてご紹介します。

本家のわいひらさんのサイトを参考にさせて頂きました。いつもありがとうございます。

ナビゲーションメニューにアイコンを表示する方法

やることはたったの３つです。

作業時間の目安としては大体３分ぐらいです。（メニューの数にもよりますが笑）

それでは１つずつ見ていきましょう

まずはプラグインから「Font Awesome 4 Menus」を検索して、インストールしてください。プラグインはこんなやつです。

プラグインをインストールした後に、「外観」→「メニュー」でメニュー画面を開き、画面右上の「表示オプション」をクリックしてください。

続いて、表示オプションの真ん中あたりにある「CSSクラス」にチェックをつけてください。

すると、メニューの中でCSSクラスが入力できるようになります。

CSS classの中にAwesomeのクラス名を追加して「メニューを保存」ボタンを押せば、ナビゲーションメニューにアイコンが表示されます

それではAwesomeのクラス名を取得します。

まずはAwesomeのサイトにアクセスしてください。

サイトの真ん中あたりの検索窓から入力したいアイコンを探してください。例えば、WordPressのアイコンを探す場合はwordと入れれば、出てきます。

アイコンの詳細画面で、クラス名をコピーすればOKです。

あとは、先ほどのメニュー画面に貼付ければ、ナビゲーションメニューにアイコンが表示されます。

大体、３分ぐらいで出来たのではないでしょうか。アイコンを探すところに時間をかけると３分ではいかないかもしれないですが、かなり簡単に出来ると思います。

イメージでメニューを選びやすくなるため、是非やっておきたいカスタマイズだと思います。