WordPressテーマ「Cocoon」のメニューにアイコンを入れる方法

WordPress

WordPressテーマ「Cocoon(コクーン)」のメニュー項目にアイコンを入れる方法です。

アイコンは「Font Awesome」といってCocoonに標準で読み込まれているアイコンフォントを使用します。

「Font Awesome」のアイコンは画像ではなくフォント扱いになりますので、簡単に利用することができます。

広告

Cocoonで「Font Awesome」を使用するときの注意

Cocoonで「Font Awesome」を使うときにはひとつ注意点があります。

それは、

旧バージョンである4.7.0を利用すること。

自分はバージョン5の「Font Awesome」を使おうとして表示されず、戸惑いました。

使用したいフォントアイコンをみつけましょう

Font Awesome(Ver.4.7.0)のサイトを開きます。

メニューにある「Icons」をクリックします。

すると、ずらずらっとアイコンが並んだページに移動します。

たくさん並んでるアイコン一覧から好きなアイコンをみつけてもいいですし、検索ボックスから英単語を入力してアイコンを探すこともできます。

試しに「home」と検索ボックスに入力してみます。

「home」に関連するアイコンが表示されます。

家のアイコンをクリックします。

家のアイコンが大きいのから小さいのまで表示されたページに移ると思います。

アイコンを表示させるために必要なのは、このページにある

<i class=”fa fa-home” aria-hidden=”true”></i>

の部分になります。

WordPressのメニュー項目でアイコンを表示させる

WordPressの管理画面から、外観 → メニューを開きます。

ナビゲーションラベルに入れてあるメニュー名の前に

<i class=”fa fa-home”></i>

をコピペして貼りつけます。

たとえばHOMEのナビゲーションラベルは、

<i class=”fa fa-home”></i> HOME

のようにします。

aria-hidden=”true”の部分は不要でかまいません。

もしアイコンの大きさを変更したいときは、次のように記述します。

【サンプル】
fa-lg  fa-2x  fa-3x  fa-4x  fa-5x
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

メニュー用のアイコンですので、特に大きさは指定しなくてもよいかもしれませんね。

この方法で、メニュー項目にアイコンをつけて見栄えよくすることができました。

「メニューをちょっとカッコよくしたいな」と思う方は試してみてくださいね!

タイトルとURLをコピーしました