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

皆さま、お盆休みはどのように過ごされましたか?

ぼくは、鳥取の氷ノ山までキャンプに行ったのが唯一の活動で、あとはウチでゴロゴロと過ごしておりました。

やらなきゃならないことも色々あるのですが、「これはこれでまあいいか」と思えたりして…

今回の記事は、久しぶりにWordpress関係です。

先日このブログのメニューに「Font Awesome」のアイコンを表示するようカスタマイズしたので、その方法を紹介したいと思います。

オヤジのこんなブログでも、こうした「装飾」を使うと、少し華やいだ感じになると思いませんか!?

スポンサーリンク

Font Awesome 4 Menusのインストール

WordPressのプラグイン「Font Awesome 4 Menus」をインストールすると、簡単に「Font Awesome」のアイコンをメニューに表示できます。インストールは、いつも通り、プラグイン > 新規追加 から実行できます。

準備として必要なのは、これだけです。

Font Awesomeでアイコンを検索

「Font Awesome」のサイトで、メニューに表示したいアイコンを探します。

メニューにある「Icons」をクリックして、検索ボックスに使いたいアイコンと関連が深そうなキーワードを(もちろん英語で)入力します。

今回はメニューのホームに使えそうなアイコンを探す想定で、とりあえず「home」と入力してみました。下に検索結果が表示されます。

気に入ったアイコンをクリックすると名前が表示されるので、表示された名前をコピーしておきます。打ち間違える心配がなければ、もちろん覚えておくだけでOKです。

この例では「fa-home」がアイコンの名前です。

メニューアイテムへの設定

外観 > メニューを表示して、アイコンを表示したいメニューアイテムの「CSS Class (オプション)」に、さきほどの名前「fa-home」を入力するだけです。

他にもアイコンを表示したいメニュアイテムがあれば、この「検索」と「設定」を繰り返し実施してください。

サブメニューにも設定できます。

アイコンが表示されているか確認

メニューの変更を保存すると、ブログのメニューに設定したアイコンが表示されます。

表示されているアイコンをインスペクタというツールで見てみると、「Font Awesome」のサイトにあったのとは少し違いますが、<i class=”fa fa-home”></i> で表示されていることがわかります。

このように、プラグインを使えば、簡単にFont Awesomeのアイコンをメニューに表示することができます。