Font Awesome 4 Menusを使ってグローバルメニューにアイコンを付けてみよう

「WordPress(ワードプレス)Tips」は、 WordPressテーマ&プラグイン販売 コミュニティコムショップが、 WordPressを使うために知っておきたいノウハウやヒントを解説するシリーズです。

今回はグローバルメニューにかわいいアイコンを付けてみようと思います。
それでは、まずはBefore/Afterの確認から!
こんな風になる予定です。

それでは早速はじめましょう!

0.before:グローバルメニュー
Before
10.after:グローバルメニュー
After

1.プラグインの追加

1.プラグイン新規追加
2.プラグイン検索
3.有効化

赤枠の通りに、プラグイン>新規追加を選びます。


Font Awesome 4 Menus」を検索し、「いますぐインストールする」を選びます。


下の画像が出てきますので、「有効化」します。


2.アイコンの設置

外観>メニューを選びます。

表示オプション
4.外観>表示オプション>CSSクラス
メニュー構造

「表示オプション」を展開します。


「CSSクラス」というチェックボックスにチェックを入れます。


その次はメニュー構造にうつりましょう。
各項目の小さな矢印を展開します。


「CSS class(オプション)」の表示は確認できましたでしょうか?

6.CSS-class
icon-足跡
9.icon2



確認できたら、アイコンを呼びだします!
Font Awesomeにアクセスし、好きなアイコンを選んでください。
私は、こちらの足跡マークをお借りすることにします。



アイコンを決めたら、CSS class(オプション)の枠に転記します。

11.完成


設定は以上となります!
可愛いアイコンは表示されましたか?

それでは、この辺で!

WordPress(ワードプレス)テーマ&プラグイン販売 コミュニティコムショップでは、
タイムカード・勤怠管理・入退室管理プラグイン を販売しています。 このプラグインとUSB接続のバーコードリーダーがあれば、WordPressでお店や会社で働くスタッフの勤怠管理、会員制スペースやコワーキングスペースの入退室・利用管理をすることが可能です。

>> タイムカード・勤怠管理・入退室管理プラグイン by Communitycom