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

font awesomeアイコン表示崩れ HSPが実践する副業ブログ

こんばんは、ブルです。

ワードプレステーマ「コクーン」で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の使い方につきましては下記の記事で紹介しておりますのでご覧ください。

HSPが実践する副業ブログ
繊細さんの自己紹介
ブル

HSS型HSP(スコア114)とアダルトチルドレン。四国の片田舎育ち⇒20代半ばで上京⇒現在30代半ばで家族とともに東京在住。繊細で好奇心旺盛なことから仕事が長続きせず、すでに9回の転職を経て現在10社目。不安の強いHSPが生きやすく、働きやすくするための気づきを発信しています。特に私にとって最大の悩みの種である【仕事】について日々考える。※ブルは雄牛の意。穏やかで力強い雄牛のようになりたい人。Twitterやってますので気軽にフォローしてください!

ブルをTwitterでフォローする↓↓↓
ブルをTwitterでフォローする↓↓↓
ブルージーライフ

コメント

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