アイコンフォントの進化

Cocoonは仕様としてアイコンフォント　Font Awesome 4/5が選べるようになっています。
ところが昨今、Font Awesomeは 7.2。
金銭を払わないと使えないpro仕様のアイコンも増えたのですが、面白いアイコンがちょこちょこ増えております。

柳のサイトでアイコンフォントを使っているのはトップページのボックスメニューくらいなのですが、できればここに新しいアイコンフォントを使えるようにしたいなー…

ということで、やり方を調べました。

Cocoonのボックスメニューでは、アイコンフォントを表示する仕様になっていますが当初その指定方法は、メニューの編集でナビゲーションラベルの下に表示されるCSSクラスに

ところが、それが最近ちゃんと機能しないアイコンが出てきました。要はFont Awesome 6か7で使えるようになったアイコンですね。
何かなーと思って調べてみると…

Cocoonのメニューアイコンは、
「CSSクラスに Font Awesome のクラスを書けば表示される」仕組みではないためです。
Cocoonはメニューアイコンを次のように処理します：

• メニュー項目に CSS クラスがある
• そのクラス名を Cocoon独自のアイコンセットとして扱う
• Font Awesome のクラスは対象外
• 該当アイコンがなければ デフォルトの★を表示
  つまり、Font Awesome のクラスを入れても Cocoon はそれをアイコンとして扱わないのです。

じゃあ、対処としてはどうすべきなのか。

①Cocoonのメニューアイコン機能を無効化して、独自CSSで制御する
②メニューの「CSSクラス」ではなく、HTMLでアイコンを入れる

ということのようです。

具体的には

.menu-item .menu-icon {
display: none;
}

これでデフォルトのメニューアイコンを無効化して

例：FA7のパレットアイコンを表示したい場合
ナビゲーションラベルに以下を入力する

<i class="fa-solid fa-palette"></i> 千柳亭画房

とまあ、いままでラベルだけを入力していた部分にHTMＬで一緒に書き込めばいいということのようです。

もう一つ言えば

<i class="fa-solid fa-palette"></i><br> 千柳亭画房

HTMLを打ち込んだ後で改行し、アイコンフォントにだけ別のCSSを当てて大きくしたり色を変えたりすれば

これと同じ仕様にできるということがわかりました。それで仕上がったのが今回のトップページ・ボックスメニューという次第。

最後に、CSSも備忘録として上げておきます。

ボックスメニューの★を消して FA7 を綺麗に表示する CSS

/* Cocoonのデフォルト★アイコンを非表示 */
.box-menu-icon {
display: none;
}

/* Font Awesome アイコンを大きく中央に / .box-menu a i { font-size: 2.2em; margin-bottom: 6px; color: #f0f0f0; / アイコン色（必要に応じて変更） */
}

/* ラベルを中央揃え */
.box-menu a {
text-align: center;
}

後は、マージンやらを好みに調整するだけ。

項目も増えましたし、アイコンで少し遊んでもみました。ご意見ご感想お待ちしております。

余談ながら、Novel-3のアイコンを天使様にしてやろうと画策したら一個残らず課金対象でした。…まあ、そうなるわな（笑）