簡単！グローバルメニューのアイコンやラベルを色分けする

グローバルナビメニューには、簡単にアイコンフォントを設定できますが、そのアイコンフォントの色を変更したり、ラベル（メニュー）ごとに色分けする方法についてです。

Cocoonに限らず、FontAwesomeが使えるテーマであれば同様に行えます。

グローバルメニューにアイコンフォトを設定する方法は以下にまとめています。

その他カスタマイズは以下も参考にして下さい。

カスタマイズ

アイコンフォントだけを色分け

ラベルにもそれぞれに色をつける

アイコンフォントを指定する「ナビゲーションラベル」の部分に

以下のようにカラーコードを指定して追記する事で可能です。

 style="color: #ffaaaa"

例

<i class="fas fa-home" style="color: #ffaaaa"> </i>Home

具体的にはメニューに以下のように設定します。

結果

それぞれに別のカラーコードを指定すれば色分けも可能です。

メニューにはCSSクラスオプションがあり、それを利用して簡単なCSS追記します。

メニューの設定にCSSクラスが表示されていない場合は、上部の「表示オプション」で表示させます。

メニューの項目１つ１つにクラス名を指定できるので、色を変えたい場合には、違うクラス名をつけて保存します。

例

アイコンフォントとラベルを同じ色にする場合は、

メニューのナビゲーションラベルで設定するアイコンフォントには色指定をせず、任意のクラス名だけを指定します。

CSS

.menu_color_1 .item-label{color: #ffaaaa;}

結果

メニューが３つある際のサンプル

CSS

.menu_color_1 .item-label{color: #ffaaaa;}
.menu_color_2 .item-label{color: #05b142;}
.menu_color_3 .item-label{color: #51a8ff;}

結果

アイコンフォントとラベルを違う色にする場合は、

メニューのナビゲーションラベルで設定するアイコンフォントには色指定をし、任意のクラス名も指定します。

CSS

.menu_color_1 .item-label{color: #51a8ff;}

結果

メニューが３つある際のサンプル

（わかりやすいように、色々なカラーにしています）

CSS

.menu_color_1 .item-label{color: #1e1eff;}
.menu_color_2 .item-label{color: #be0000;}
.menu_color_3 .item-label{color: #929f42;}

結果

お好きなカラー設定には以下もご利用下さい。

綾糸: 綾糸　主婦 1990年代、汎用機時代のエンジニア趣味で長くやっていたweb制作は、未だにエディタでの手コーティング現在は自宅でゆるりとweb制作やライターをしています