ストーク19ではテーマデフォルトでFont Awesome5のアイコンフォントが読み込まれていますので、記事内などでも使うことができます。
ここではFont Awesomeのアイコンフォントをグローバルナビに表示する方法をご紹介します。
![](https://open-cage.com/wp-content/uploads/2020/02/f7e126f2e64ef2c15c7def5d36b6b5af.png)
Font Awesomeとは
Webサイトやブログにアイコンフォントを表示できるサービスです。画像とは違いフォント扱いになるので、高解像度ディスプレイでの表示、拡大表示してもぼやけずきれいです。
もくじ
Font Awesomeでアイコンを選択する
使いたいアイコンを選ぶ
まずはIconsから使いたいアイコンを選んでクリックしてください。(無料で使えるのはFreeのアイコンになります)
![](https://open-cage.com/wp-content/uploads/2020/02/93ecaf272192c3eb24a35745a79cb864-1024x693.png)
アイコンのタグをコピーする
アイコン詳細ページに記載されているアイコンタグ<i class...></i>
をコピーしてください。(タグをクリックするだけでコピーできます!)
![](https://open-cage.com/wp-content/uploads/2020/02/e0dbe538d306b6dcbc89e7424827a8cb-1024x656.png)
メニュー編集画面でアイコンタグを貼り付ける
次はWordPressの管理画面に移り【外観 > カスタマイズ > メニュー】または【外観 > メニュー】から設定します。ここでは【外観 > カスタマイズ > メニュー】での設定方法を解説します。
グローバルナビに設定しているメニューを開く
管理画面の【外観 > カスタマイズ > メニュー】から「グローバルナビ(PC用)」または「グローバルナビ(モバイル用)」が設定されているメニューを開いてください。
※まだグローバルナビを設定していないという場合は、まずはこちらを参考にグローバルナビを設定してください。
![](https://open-cage.com/wp-content/uploads/2020/02/482c7e84d0f9c605d28caf41bdb0af75.png)
ナビゲーションラベルにアイコンタグを貼り付ける
各項目を開いて「ナビゲーションラベル」に入力しているナビ項目名の左横または右横にFont Awesomeでコピーしたアイコンタグを貼り付けてください。
![](https://open-cage.com/wp-content/uploads/2020/02/9833d0ba377912d264c93751bdcf205e.png)
このような感じで他のナビゲーション項目についても設定していきます。
- Font Awesomeでアイコンを選んでタグをコピー
- ナビゲーションラベルにアイコンタグを貼り付ける
ちゃんとアイコンタグの貼り付けができていれば、プレビューでアイコンが表示されるはずです!
![](https://open-cage.com/wp-content/uploads/2020/02/ec84a5d6263353fe575f41a9d1aa5de2.png)
【応用編】便利な使い方
アイコンの左右にスペースを作る
普通にアイコンタグを貼り付けた場合、アイコンと隣り合うテキストとの間隔が無いので、あまり見栄えがよろしくありませんね。
アイコンタグとテキストの間に半角スペースを入れるのが一番簡単なのですが、Font Awesome専用のクラス名を入力する方法もあります。
アイコンタグの中にfa-fw
というクラスを追加することで、アイコンの前後に少し余白が作ることができます。
<i class="fas fa-file-alt fa-fw"></i>
![](https://open-cage.com/wp-content/uploads/2020/02/c692414f64dea243c42ee47f663027a4.png)
アイコンを大きくする
デフォルトのアイコン表示サイズが小さいと感じる場合は、アイコンタグの中にfa-lg
というクラス名を追加することで大きくすることができます。
<i class="fas fa-file-alt fa-lg"></i>
![](https://open-cage.com/wp-content/uploads/2020/02/887111014846c7cc5268dda28705f349.png)
ちなみにfa-2x
で2倍、fa-3x
で3倍といった感じにも変更できるようです。
<i class="fas fa-file-alt fa-2x"></i> <i class="fas fa-file-alt fa-3x"></i>
アイコンの色を変える
アイコンを目立たせたい場合などは、CSSを設定してアイコンの色を変更することもできます。
まずはアイコンタグの中に任意のクラス名を追加しますが、ここでは例としてstk-yellow
というクラス名にします。(クラス名はわかり易いものなどお好みで決めてください)
<i class="fas fa-file-alt stk-yellow"></i>
そして追加したクラス名(stk-yellow)に対してスタイル(色)を指定します。
スタイルは子テーマのstyle.cssもしくは管理画面の【外観 > カスタマイズ > 追加CSS】に記述してください。
.stk-yellow {color:yellow;}
![](https://open-cage.com/wp-content/uploads/2020/02/a77afcca0610ad1a644c5e47dfadf12c.png)
ナビゲーションにアイコンを表示することで見た目が映えるのと、そのメニューの役割をわかり易くするという効果もあるので、好みや目的に合ったアイコンを探してみてください。