BLOG

Cocoonでメニューにアイコンを表示する方法

ナビゲーションバーやメニューにアイコンを表示する方法を紹介します。

例えばこんな感じですね


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

 

 

-BLOG

© 2021 Door Blog (ドアブログ) Powered by AFFINGER5