Font Awesome4から5にする時に変更する箇所

お世話になっております。 フォントアイコンのFont Awesome4から5に変更したら アイコンの表示が□になってしまします。 COCOON設定のFont Awesomeの設定の他に、どこを変更すれば良いのでしょうか？ お手数おかけしますが、教えて下さい。 宜しくお願い致します。: 回答です

Font Awesome 4と5の違い

Font Awesome ４ではclass名が.faだったのが、
Font Awesome ５ではスタイルが下記の4つになりました。

Font Awesome Solid
Font Awesome Regular
Font Awesome Light
Font Awesome Brands

その影響で、Font Awesome ４の.faだったclass名を、Font Awesome ５ではスタイルに応じて変更する必要が出てきました。

Font Awesome4

Font Awesome5

Font Awesome ４での.faclassを使ったままでは表示されないので注意です。

Font Awesome 5を使うメリット

Font Awesome 4ではなく、Font Awesome 5を使うメリットは
ズバリ！サイトのページを読み込み速度が速くなるというSEO対策になるからです。
（ほんの少しかもしれません。）
なぜサイトのページを読み込み速度が速くなるSEO対策になるのかと言うと、GoogleのPageSpeed InsightsでFont Awesome 5は認識されないからです。
つまり、Font Awesome 5を使っているとPageSpeed InsightsでFont Awesome 5は認識されないので、Googleはページ速度の早いサイトだと思い、検索上位に表示され、観覧者数が増え、人気サイトと認識して、また検索上位に表示するというメリットがあります。

Font Awesome4から5にする時に変更する箇所

Font Awesome4から5にする時に変更する時には、COCOONでは自動で設定は出来るのですが、その他にもAwesome4のタグの書き換えが必要なので説明致します。
まずは、下準備です。

COCOON設定でFont Awesome4から5にする

①WordPress管理画面から「COCOON設定」をクリック
②「全体」をクリック

「全体」のタブの中の
Font Awesome4から5にチェックを入れて「保存」

これで、Font Awesome4から5にするCOCOON設定が終わりです。
簡単。便利です。

CSSをFont Awesome4から5にする

Font Awesome4から5にするにはCSSの変更が必要です。
Font Awesome4の状態では下のようなCSSが書かれていると思います。

Font Awesome 4

/* H2見出しAwesome4アイコン表示 */
.article h2::after {
font-family: FontAwesome;
content: “\f07c”;/*アイコンの形*/　
margin-right: 5px;
display: inline-block;
color: #E44D26; /* アイコンの色 */
}

Awesome5に変更するには、下のように書き換えます。

Font Awesome 5

/* H2見出しAwesome5アイコン表示 */
.article h2::after {
font-family: “Font Awesome 5 Free”;
content: “\f07c”;/*アイコンの形*/　
font-weight: 900;
margin-right: 5px;
display: inline-block;
color: #E44D26; /* アイコンの色 */
}

変更箇所は2ヶ所
Font Awesome4の「font-family: FontAwesome;」を
Font Awesome5は「font-family: “Font Awesome 5 Free”;」に変更
　
そして、Font Awesome5に
font-weight: 900;を追加

これで、Font Awesome4から5にする作業の完了です。

Font AwesomeのCSSが、どこか分からない場合

当、マッチングサイトテンプレートの場合、COCOONのテーマを使っています。
COCOONテーマの場合は
①WordPress管理画面から
「外観」＞「テーマファイルエディター」＞「スタイルシート (style.css)」の中
②WordPress管理画面から
「外観」＞「カスタマイズ」＞「追加CSS」の中
どちらかにあるはずです。