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

Simplicity
SponserLink

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

 

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

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

SponserLink

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

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

  1. プラグイン「Font Awesome 4 Menus」のインストール
  2. 外観→メニュー→表示オプション→CSSクラスにチェック
  3. メニュー毎にAwesomeのクラス名を追加

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

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

 

「Font Awesome 4 Menus」のインストール

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

Font Awesome 4 Menus

 

メニューの表示オプションを変更

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

menu_option

 

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

menu_option_css_class

 

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

menu_css_class

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

 

Awesomeのクラス名を取得/設定

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

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

awesome_home

 

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

awesome_wordpress

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

icon_wordpress_copy

 

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

class_menu

menu_icon_display

 

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

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

SimplicityWordPressブログ運営

関連おすすめ記事

宜しければシェアをお願い致します
運営者プロフィール
jin
jin

妻と娘の3人で暮らしています。
「お金、時間、そして家族を大事にしたい」と考えるパパにとって、少しでもプラスになれたらいいなと思って情報発信しています。宜しくお願い致します。

jinをフォローする
ぱぱたす(PaPa+)

コメント