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

font awesomeアイコン表示崩れ 副業ブログ

こんばんは、ブルです。

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

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

スポンサーリンク

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

font awesomeアイコン表示崩れ

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

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

Cocoon設定にFont Awesomeの箇所を確認する

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

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

Cocoon設定でのFont Awesome設定箇所

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

Font Awesomeのバージョンを切り替える

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

Font Awesomeアイコン正常表示

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

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

コメント

タイトルとURLをコピーしました