おしゃれなブログや、わかりやすいHPをみると、グローバルメニューにアイコンフォントを表示させているサイトがおおいですよね。これって、大変難しいのかと思ってましたから、Font Awesome 4 Menusというプラグインを使用すると結構簡単にできました。
ただ、似合うアイコンを探すのには結構時間かかりましたけど。
アイコンフォント自体は、Font Awesomeのアイコンフォントを使用しています。色々なアイコンが文字として使えるので、大きさや、色、動きなども出来るようになっていて便利です。
今回は、Font Awesomeのアイコンフォントをグローバルメニューに表示させる方法を紹介します。
目次
Font Awesome 4 Menusプラグインのインストール
1 管理メニューから、プラグインをクリック
2 新規追加から「Font Awesome 4 Menus」と入力します。
3 今すぐインストールをクリック
1 インストールが終わったら、有効化をクリックします。
WordPress側の設定
1 管理画面の外観→メニューをクリック
2 上の方に、表示オプションという項目があるのでクリック
3 CSSクラスにチェックをいれます。
WordPress側の表示オプションの設定は、これだけです。
メニューにFont AwesomeのCSSクラスを記入
いよいよ、グローバルメニューにFont AwesomeのアイコンのCSSを入力していきます。
その場所を説明します。
1 各メニューのカテゴリーの右横の▼をクリックします。
ここにFont AwesomeのCSSクラスを記入します。
Font AwesomeのアイコンのCSSをコピー
Font Awesomeにアクセスし、アイコンを選びます。
アスセスすると、こんな感じにアイコンが600個以上ならんでいます。
お目当てのアイコンがあったら、それをクリックします。
一覧からアイコンを選択してクリックすると、こんな画面が出るので、この例だと
fa-pencilをコピーします。
メニューのCSSクラスに貼り付け
1 Font Awesomeのクラス名を貼りつけます。
メニューの設定が終わったら「メニューの保存」ボタンを押してください。
使用したアイコンのCSS
メモ代わりに使用したアイコンの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> | |
fa-envelope-o | <i class=”fa fa-envelope-o” aria-hidden=”true”></i> |
アイコンを探すのが結構大変なので、下記のサイトを参考にして探すと見つけやすいです。
参考Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた
Font Awesome 4 Menusの設定内容
1 管理メニューの設定をクリックして、
2 Font Awesomeをクリック
Font Awesome Stylesheetの設定
Font Awesomeのスタイルシートの呼び出しについて設定します。
Load Font Awesome 4 Fromの項目で以下が設定できます。
1 プラグインのローカルフォルダ。通常はこのままでOKです
2 Font AwesomeのオフィシャルCDMサーバーから取得
3 ユーザーが設定した任意の場所
4 Font Awesomeスタイルシートを使用しない。
私は、既にテーマなどで既に呼び出しているのでこちらにチェックを入れました
アイコンと文字の間にスペースを入れる場合の設定
グローバルメニューのアイコンと文字との間にスペースを入れる場合には以下にチェックをつけます。(私が設定を見た時には最初からチェックが入ってました)
仕上がりは
私のもう一つのサイトで実際に設定してみて、グローバルメニューにアイコンを表示させてみました。
スキンを記事毎に変えているので、色々なメニューの形になりますが、アイコンがあるといい感じです!
スキンについての記事は以下となります。

まとめ
Font Awesome 4 Menusというプラグインを使用すると、WordPressのグローバルメニューにFont Awesomeのアイコンを簡単に表示させる事が出来ました。
ちょっと、凝ったサイトだなあとか、他のサイトと少し違った感じを出すのにいいかもしれないですね。
こちらのサイトも、そのうちにメニューにアイコンを表示させてみようと思います。