【Cocoon】ヘッダーメニューにアイコンを追加する方法

当サイトはWordPressの無料テーマ「Cocoon」を使用しています。

今回は「Font Awesome」を使ってヘッダーメニューにWebアイコンフォントを追加する方法をみていきます。

Contents

Webアイコンフォントを表示させるための便利なサービス「Font Awesome」を使えば簡単にアイコンを追加することができます。

「Font Awesome」を使ってヘッダーメニューに「home」アイコンを追加してみましょう。

赤枠の「Icons」をクリック。

次に検索バーに「home」と入力すると下に検索結果が出るので、赤枠の「home」をクリック。

検索しない場合は、下に表示されているアイコン一覧から選択します。

最後に赤枠のコードをコピーして終了。

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

続いて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」にはたくさんの種類のアイコンがあるので、自分のメニューに合うアイコンを色々と試してみてください。