ワードプレスのメニューにアイコンを追加できるプラグイン Font Awesome 4 Menus プラグインの紹介

ワードプレスで作られたサイトを色々見ていると、ナビゲーションメニューにアイコンが使われているのをよく見かけます。
ワードプレスのメニューにアイコンを追加できるプラグイン ないかなーとググっていたらやり方が分かったのでメモしておきます!

人気のウェブフォント Font Awesome

人気のウェブフォント Font Awesome
アイコン型のフォントが使えることで大人気のFont Awesome
今回利用するプラグインは、このFont Awesomeのフォントをワードプレスで簡単に使用できるようにするプラグインです。

Font Awesome 4 Menus インストール方法

Font Awesome 4 Menus インストール方法
①管理メニューの「プラグイン」→「新規登録」

②「Font Awesome 4 Menus」で検索

③「Font Awesome 4 Menus」の「いますぐインストール」をクリック

④インストールが完了したら「有効化」をクリック

Font Awesome 4 Menus 使い方

メニューの設定

Font Awesome 4 Menus メニューの設定

使用したいアイコンの決定

Font-Awesome-search
Font-Awesome-copy
インストールが完了したら、アイコン探しに行きましょう。
Font Awesome のサイトへ行き、メニューの「icons」をクリックした先の検索ボックスで「wordpress」で検索します。
ワードプレスのアイコンが出てくるのでクリック。
表示されたクラス名をコピーします。

メニューにclassを追加

Font Awesome 4 Menus クラス名の入力
ワードプレス管理画面の「メニュー編集」でアイコンを追加したい項目を選び、「CSS class」の欄に先ほどコピーした内容を貼り付けて完了です。