自分のサイトをチェックしていたら何か違和感を感じたのですが、よく確認してみるとFont Awesome4のアイコンが消えておりました。
消えたという訳ではありませんが、アイコンが「×」のような表示になり正しく反映されていないのです。
Font Awesome 5 へ変更する
このサイトで利用しているのは2016年10月にリリースされた「Font Awesome 4」で、直近では2023年8月に「Font Awesome 6」がリリースされています。
原因を追求するよりも新しいバージョンに切り替えた方が早そうな気がしたので、Cocoonで利用可能なFont Awesome5に変更してみることにしまた。
Cocoonの設定
Cocoon設定(×2)から「全体」を選択します。
下の方にある「サイトアイコンフォント」でFont Awesome 5 を選択して保存します。
CSSカスタマイズコード【サンプル】
Font Awesome を以下のようにCSSでカスタマイズしている場合はコードの修正が必要になります。
.list-6 li ::after {
font-family: Font Awesome\ 5 Free;
content: "\F105";
font-weight:bold;
}Font Awesome 5 が表示されない
Font Awesome 5 を指定するコードは何パターンかあるようです。テーマやカスタマイズによるのか分かりませんが、アイコンが表示されない場合はいくつか試してみる価値はあると思います。
【成功】
font-family: Font Awesome\ 5 Free;
【失敗】
font-family: Font Awesome 5 Free;
font-family: FontAwesome 5 Free;
font-family: FontAwesome5 Free;Font Awesome 4 の表示エラー
Font Awesome4が表示されなくなったのは私の凡ミスでした。全てではなく特定のカスタマイズだけでしたので、コードの修正で改善しています。
以下の記事の冒頭で少し触れていますので、同じような状況の方は参考にしていただければと思います。
