当サイトはWordPressの無料テーマ「Cocoon」を使用しています。
今回は「Font Awesome」を使ってヘッダーメニューにWebアイコンフォントを追加する方法をみていきます。
【Cocoon】ヘッダーメニューにアイコンを追加する方法

Webアイコンフォントを表示させるための便利なサービス「Font Awesome」を使えば簡単にアイコンを追加することができます。
「Font Awesome」を使ってアイコンを追加
「Font Awesome」を使ってヘッダーメニューに「home」アイコンを追加してみましょう。
https://fontawesome.com/v4.7.0/
赤枠の「Icons」をクリック。

次に検索バーに「home」と入力すると下に検索結果が出るので、赤枠の「home」をクリック。
検索しない場合は、下に表示されているアイコン一覧から選択します。

最後に赤枠のコードをコピーして終了。
<i class="fa fa-home" aria-hidden="true"></i>

WordPressでの作業
続いてWordPressでの作業に移ります。
管理画面から「外観」→「メニュー」と進み、メニュー構造の中のアイコンを入れたいメニューをクリック。
以下のように先ほどコピーしたコードを「Home」の前に貼り付け。

アイコンとHomeの間に半角スペースを空けておくと、アイコンとHomeがくっつき過ぎずちょうどいい感じになるかと思います。
なお、先ほどコピーしたコードに「fa-fw
」を追加してもスペースを空けることができます。
<i class="fa fa-home fa-fw" aria-hidden="true"></i>
これでカスタマイズ終了です。とても簡単ですね!
【補足】アイコンのサイズを変える方法
アイコンのサイズを変えたい場合はコピーしたコードに、以下のコードを追加してください。
「fa-lg」、「fa-2x」、「fa-3x」、「fa-4x」、「fa-5x」の全部で5段階になります。
<i class="fa fa-home fa-lg" aria-hidden="true"></i>
<i class="fa fa-home fa-2x" aria-hidden="true"></i>
<i class="fa fa-home fa-3x" aria-hidden="true"></i>
<i class="fa fa-home fa-4x" aria-hidden="true"></i>
<i class="fa fa-home fa-5x" aria-hidden="true"></i>
もしこれ以外のサイズにしたい場合は、自分でCSSでコードを書く必要があります。
まとめ
カスタマイズは以上となります。
ヘッダーメニューにアイコンが入ることで、よりWebサイトらしくなりましたね!
「Font Awesome」にはたくさんの種類のアイコンがあるので、自分のメニューに合うアイコンを色々と試してみてください。
