ナビゲーションバーやメニューにアイコンを表示する方法を紹介します。
例えばこんな感じですね
Cocoon 2.0.0 から 最新のFont Awesome 5 を使用できますので
その方法について紹介します。
手順は次の通りとなります
この記事の目次
Cocoonの設定をFontAwesome4→5に変更する
Font Awesome5を使用するには、Cocoon2.0.0以上が必要です。
Cocoon1.x.xの方は、
先にCocoonのバージョンをUpdateしてください
WordPressのダッシュボードから『Cocoon設定』を選択します
次に、Cocoon設定の全体タブを選択
『サイトアイコンフォント』の設定を
Font Awesome 4 → 5 に変更してしてください
以上で Cocoonの設定は完了です。
簡単ですね ♫
Font Awesome5からアイコンを選ぶ
Font Awesome5のアイコンを検索します。
https://fontawesome.com/icons?d=gallery&m=free
検索窓に 探したいアイコンのキーワードを入力します
ここでは HOME を検索してみます
使用したいアイコンをクリックします
こちらのコード <i class="fas fa-home"></i> をコピーします
取得したコードをメニューに貼り付ける
WordPressのダッシュボード → 外観 → メニュー をクリック
メニューの設定画面から ナビゲーションラベル の項目に
先ほどコピーした タグ を貼り付けます。
以上の設定で
<I class="fas fa-home"></I>HOME
HOME
のようにアイコンが表示されます
アイコンのサイズ、スペースの調整
スペースの調整
fa-fwを追加するとアイコンと文字の間のスペースを調整できます
HOME
<i class="fas fa-home fa-fw"></I>HOME
アイコンサイズの調整
fa-lg fa-2x fa-3x のコードを追加することで
アイコンのサイズを変更することができます
HOME fa-lg （33% 大）
<i class="fas fa-home fa-lg fa-fw"></I>HOME
HOME fa-2x （2倍）
<i class="fas fa-home fa-2x fa-fw"></I>HOME
HOME fa-3x （3倍）
<i class="fas fa-home fa-3x fa-fw"></I>HOME