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

おしゃれなブログや、わかりやすい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>
  mail  fa-envelope-o   <i class=”fa fa-envelope-o” aria-hidden=”true”></i>
” aria-hidden=”true” の意味は、スクリーンリーダー等で読み上げをスキップする方法として指定してあるようです。これはなくてもアイコンとして表示するだけならば問題ありません。

アイコンを探すのが結構大変なので、下記のサイトを参考にして探すと見つけやすいです。

参考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スタイルシートを使用しない。

私は、既にテーマなどで既に呼び出しているのでこちらにチェックを入れました

アイコンと文字の間にスペースを入れる場合の設定

グローバルメニューのアイコンと文字との間にスペースを入れる場合には以下にチェックをつけます。(私が設定を見た時には最初からチェックが入ってました)

仕上がりは

私のもう一つのサイトで実際に設定してみて、グローバルメニューにアイコンを表示させてみました。

スキンを記事毎に変えているので、色々なメニューの形になりますが、アイコンがあるといい感じです!

スキンについての記事は以下となります。

【Simplicity】スキン着せ替え方法
私の利用しているテーマのSimplicityでは全てのページで好きなスキンを表示させることが出来るようになりました。Simplicityでは、ユーザーの方が色々なスキンスタイルを作成されています。その設定方法に関する紹介です。

まとめ

Font Awesome 4 Menusというプラグインを使用すると、WordPressのグローバルメニューにFont Awesomeのアイコンを簡単に表示させる事が出来ました。

ちょっと、凝ったサイトだなあとか、他のサイトと少し違った感じを出すのにいいかもしれないですね。

こちらのサイトも、そのうちにメニューにアイコンを表示させてみようと思います。

スポンサーリンク
広告大 アドセンスのコードを貼り付け
広告大 アドセンスのコードを貼り付け

シェアする

  • このエントリーをはてなブックマークに追加

フォローする