この記事が気に入ったらシェアしてください

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

この記事が気に入ったらシェアしてください

awesome_home

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

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

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

スポンサーリンク
広告

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

やることはたったの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分ではいかないかもしれないですが、かなり簡単に出来ると思います。

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

(Visited 414 times, 1 visits today)
スポンサーリンク
広告
広告

この記事が気に入ったらシェアしてください

もし良かったらフォローしてください