Font Awesomeが表示しない、または一部の場合の対処方法

作成日：2018-9-17

以前は正しく表示していたFont Awesome！　最近表示できなくなったのはなぜ？

Awesomeフォント表示しない

バージョン５にしたら表示できなくなった場合の対応は？

現象

Font Awesomeは頻盛にバージョンアップしています。最近バージョン５にアップデートしたら, 今まで表示していたフォントが表示しない現象が発生した。

分類

・wordpressトラブルシューティング

バージョン等

wordpress 4.9.8
Font Awesome　バージョン５

対処方法

まずは、症状の切り分けをしてください。

全然表示しない
iタグでは表示するが、:before疑似要素では表示しない
同じ書き方でも表示する場合、しない場合がある

ケース１

headに記述するlinkメタが間違っている可能性があります。もう一度、Font Awesome公式ページのHow to useをご覧になってlinkタグを貼り直してください。その際、右肩にあるバージョンの確認もしてください。

ケース２

font-familyの指定が違っている可能性があります。バージョン5ではフォントファミリーネームが代わりました。font-family:font awesome Free 5″のようなバージョン番号とfreeという種別がを含むようになりました。また、指定しているクラスが代わりました。たとえばfaというクラスがfasになっているというようなの違いです。こちらも公式ページからiタグを再コピーしてください。

指定のクラスが替わった事により、:beforeや:after疑似要素に直接ユニコードで記載している場合は、font-weightの指定も必要になります。

新クラス	アイコンの種類	指定するウェイト
fas	Solid	font-weight:900
far	Reqular	font-weight:400;
fab	Brand	font-weight:400;
fal	Light	font-weight:300;