【Font Awesome Icons】でグローバルナビにアイコンを追加してみよう
サイトのナビゲーションバーにアイコンを表示させてみました。
プラグイン「Font Awesome 4 Menues」を使うと、簡単にできます。
早速インストールしてみましょう。
プラグイン「Font Awesome 4 Menues」をインストール
「ダッシュボード」→「プラグイン」→「新規追加」をクリックして、キーワードに「Font Awesome 4 Menues」と入力します。
↓こちらのプラグインが表示されます。
「今すぐインストール」をクリックして、「有効化」させます。
メニューにCSSを表示させる
「ダッシュボード」→「外観」→「メニュー」をクリックします。
上部の「表示オプション」をクリックします。
表示された「詳細メニュー設定表示」の中から「CSSクラス」にチェックを入れます。
これで、メニュー編集に「CSS Class」という項目が追加されました。（ピンクの矢印です）
Font Awesomeサイトでアイコンを選ぶ
別のページでFont Awesomeサイトを開きます。
ここで、使いたいアイコンを選びます。
現在675個もアイコンがありますので、ここから使いたいひとつを探すのは大変です。検索を使うと便利ですよ。
例えば、「ホーム」にぴったりのアイコンを探したいときは、検索に「home」と入れてみましょう。
画像の下に書かれている[fa-home]がアイコンタグになります。
＊画像一覧で書かれている[home]がタグではありません。
うまく表示されない場合、このタグを間違えて入力している可能性があります。もう一確認してみてくださいね。
メニュー構造にcssタグを入力
先ほどのメニュー構造に使用したいアイコンのCSSタグを入力します。
「メニューを保存」をクリックすれば、完了です。
サイトを開いて、グローバルナビにアイコンが表示されたのを確認してください。
