ヘッダーメニューにフリーの『Font Awesome』アイコンを設定する方法の記録です。
余談、「フォント オーサァム」と読むらしい。
公式サイトのでもマニュアルありました▽
『Font Awesome』バージョン選択
『Font Awesome』にはバージョン4と5があります。
設定方法は同じなので、どちらにするか初めに決めておいた方がよいと思います。
最新バージョンを使った方が良いと思いますが、バージョン4の方がサイトの作りがシンプルなので、アイコンを探すのは楽かもしれません。
ここからFont Awesomeのバージョン別のサイトです↓
『Font Awesome4』
こちらのサイトでアイコンを確認。
アイコン一覧はこんな感じ↓
アイコンをクリックしてみるとこんな感じ↓
『Font Awesome5』
こちらのサイトでアイコンを確認。
アイコン一覧はこちら↓
薄くなっているアイコンはPro=有料版です。結構多い！
アイコンをクリックしてみるとこんな感じ↓
右側の青い部分は、同種のアレンジされたアイコンが縦に並んでるんだけど、Pro=有料版が混じっています。
バージョン5は、全体的にPro版が多いです。
ヘッダーメニューにFont Awesomeアイコン設定方法
前提条件
テーマは『Cocoon Child』を使用。
Font Awesomeのバージョン設定
Cocoonの設定でFont Awesomeのバージョンを設定します。
[Cocoon設定]-[全体]タブ選択
[Cocoon設定]メニューを開き、[全体]タブを選択。
『Font Awesome』のバージョンを変更する
デフォルトのバージョンは『Font Awesome4』になっています。
バージョン5を使用する場合は、『Font Awesome5』に変更します。
使いたいアイコンのタグをコピー
それぞれのバージョンでアイコンのタグをコピーします。
『Font Awesome4』のアイコンを使用する場合
Font Awesome4アイコンのページで、タグをコピーしてくる。
例えば「Star」で検索して、この部分をコピー↓
<i class="fa fa-star" aria-hidden="true"></i>
↑をコピーしておきます。
『Font Awesome5』のアイコンを使用する場合
Font Awesome5アイコンのページを開き、右側の種別を選び（ここではSOLID）「Start Using This icon」をクリック。
例えば「Star」で検索して、この部分をコピー↓
<i class="fas fa-star"></i>↑をコピーしておきます。（ver4とはやはり微妙に異なってます）
メニューにコピーしたタグを設定する
[外観]-[メニュー]を開く
[メニュー構造]の個別メニューを編集する
※既にヘッダメニューが存在している前提です。ヘッダーメニューの追加方法はこちら
固定ページの一つを選択。
個別メニューのナビゲーションラベルにタグに張り付ける
先ほどのコピーしたタグをメニューのナビゲーションラベルに張り付けます。
▽例）『Font Awesome4』のタグを張り付け
▽例）『Font Awesome5』のタグを張り付け
メニューの保存もお忘れなく。
これで設定完了。
サイズを変更する
サイズは5種類あります。
『Font Awesome5』のStar=★を使用したサンプルです。
…0.75倍
<i class="fas fa-star fa-xs"></i>
…標準
<i class="fas fa-star"></i>
…1.33倍
<i class="fas fa-star fa-lg"></i>
…2倍
<i class="fas fa-star fa-2x"></i>
…3倍
<i class="fas fa-star fa-3x"></i>
…4倍
<i class="fas fa-star fa-5x"></i>
…5倍
<i class="fas fa-star fa-5x"></i>
色を変更する
黄色にしてみる場合、タグに任意のクラス名を追加。
サンプルは、「menu-star」を追加しました。
<i class="fas fa-star menu-star"></i>
style.cssに追加したクラスにカラーを設定。（サイズ指定も一緒にしてもいいかもしれない）
.menu-star {color: yellow}
