WordPressのメニューにFont Awesomeアイコンを表示

おしゃれなブログや、わかりやすいHPをみると、グローバルメニューにアイコンフォントを表示させているサイトがおおいですよね。これって、大変難しいのかと思ってましたから、Font Awesome 4 Menusというプラグインを使用すると結構簡単にできました。

ただ、似合うアイコンを探すのには結構時間かかりましたけど。

アイコンフォント自体は、Font Awesomeのアイコンフォントを使用しています。色々なアイコンが文字として使えるので、大きさや、色、動きなども出来るようになっていて便利です。
今回は、Font Awesomeのアイコンフォントをグローバルメニューに表示させる方法を紹介します。

Font Awesome 4 Menusプラグインのインストール

　管理メニューから、プラグインをクリック

　新規追加から「Font Awesome 4 Menus」と入力します。

　今すぐインストールをクリック

インストールが終わったら、有効化をクリックします。

管理画面の外観→メニューをクリック

上の方に、表示オプションという項目があるのでクリック

CSSクラスにチェックをいれます。

WordPress側の表示オプションの設定は、これだけです。

いよいよ、グローバルメニューにFont AwesomeのアイコンのCSSを入力していきます。

その場所を説明します。

　各メニューのカテゴリーの右横の▼をクリックします。

ここにFont AwesomeのCSSクラスを記入します。

Font Awesomeにアクセスし、アイコンを選びます。

アスセスすると、こんな感じにアイコンが600個以上ならんでいます。

お目当てのアイコンがあったら、それをクリックします。

一覧からアイコンを選択してクリックすると、こんな画面が出るので、この例だと

fa-pencilをコピーします。

　Font Awesomeのクラス名を貼りつけます。

メニューの設定が終わったら「メニューの保存」ボタンを押してください。

メモ代わりに使用したアイコンのCSSも書いておきます。

名称については、適当につけてます。

クラスは、グローバルメニューで使用します。タグは文中にアイコンを表示する時に使用します。

icon	名称	クラス	タグ
	pencil	fa-pencil	<i class=”fa fa-pencil” aria-hidden=”true”></i>
	road	fa-road	<i class=”fa fa-road” aria-hidden=”true”></i>
	angellist	fa-angellist	<i class=”fa fa-angellist”></i>
	eye	fa-eye	<i class=”fa fa-eye” aria-hidden=”true”></i>
	指差し右	fa-hand-o-right	<i class=”fa fa-hand-o-right” aria-hidden=”true”></i>
	レンチ	fa-wrench	<i class=”fa fa-wrench” aria-hidden=”true”></i>
	bicycle	fa-bicycle	<i class=”fa fa-bicycle” aria-hidden=”true”></i>
	info	fa-info-circle	<i class=”fa fa-info-circle” aria-hidden=”true”></i>
	mail	fa-envelope-o	<i class=”fa fa-envelope-o” aria-hidden=”true”></i>