【Cocoon】Font Awesomeでアイコン表示が崩れた時の対処法

こんばんは、ブルです。

ワードプレステーマ「コクーン」でFont Awesomeのアイコンを使おうと思って設定したら、表示が崩れてしまった時の対処方法を紹介します。

※Font AwesomeのWebページの表示崩れの場合は下記の記事をご覧ください。

【即解決】コクーンでフォントオーサムのアイコン表示が縦長の長方形になった場合の修正

上記の写真だと、「コラム」と「グルメ」のアイコンに関しては問題なく表示されているのですが、他の4つのアイコンが縦長の長方形で表示されています。

こちらを設定した通りのアイコンで表示させるために確認すべきコクーン側の設定がありますので見ていきましょう。

ワードプレス管理画面にて、Coccon設定をクリックして画面が切り替わったら下記の画像のような状態に切り替わります。

次に、「全体」をクリックすると更に画面が切り替わるため、Font Awesomeと書かれた箇所が出現するまで下にスクロールしましょう。

デフォルトだと、Font Awesome4が選択されているはずです。
アイコンが縦長の長方形に変わっているのは、Font Awesome5のアイコンを利用していた可能性が高いと言えます。

バージョンを「Font Awesome5」に切り替えて「保存」をします。
サイト（ページ）を更新して再度アイコン表示を確認してみましょう。

はい、私の場合はこちらで無事に正しいアイコンが表示されるようになりました。

Font Awesomeの使い方につきましては下記の記事で紹介しておりますのでご覧ください。