【解決】Font Awesomeの文字化けの修正方法

Fontawesomeで文字化けが起こってしまう場合は、（１）font-weightを見直す（２）font-familyを「Font Awesome 5 Free」にする（３）fasとfaを変えてみると直ります。

Font Awesome の文字化け・修正前後

修正前後はこのような形になります。

修正前

修正後

Font Awesome から Font Awesome Freeへ

「Font Awesome」は、拡張が広がり、「Font Awesome Free」というものが提供されるようになりました。
参考 Font Awesome FreeFont Awesome

そのため、今まで「Font Awesome」でうまくいっていたものが、「Font Awesome Free」になったことで、一部修正する必要がでてきたようです。

Font Awesomeは、htmlの中に記述する場合もありますし、CSSに記述する場合もあります。対処方法は若干異なりますので、ご注意ください。

Font Awesome の文字化け・対処方法

手順１：Font Familyを変える【Html・CSS共通】

まずはFont Awesomeを利用している箇所を以下のように変更してください。

font-family:"Font Awesome"

font-family:"Font Awesome 5 Free"

手順２：Font Weightを見直す【CSS】

次に、箇条書き等でFont Awesomeを利用しているときは、以下のようにFont-Weightが記述されているか確認します。

font-family:"Font Awesome 5 Free";font-weight: 900;content:"\f0a4";

尚、「Font-Weight」は、以下のように、パラメータが設定されていますので適切なものをお選びください。

手順３：faやfasを見直す【html】

HTML内で「Font Awesome」を記載している場合は、fas や　fa の設定を見直してみてください。

<i class="fas fa-adjust"></i>

「Font Awesome」は、昔は「fa」でしたが、今は「fas」で登録されています。「Font Awesome Free」では、「fas」でうまくいくはずです。

それでもうまくいかない場合は…

もし、上記でうまくいかない場合は、正しいCDNが「head」タグ内に記載されているか確認をしてください。

また、キャッシュが残っている場合もありますので、ブラウザ、WordPress等を利用中の場合はサイトのキャッシュを確認してください。

まとめ

WordPressのテーマの乗り換えのときなどで、Font Awesomeの文字化けが起こってしまうようです。公式ページに詳しく載っていますので、もし、行き詰ってしまいましたらそちらをご参照ください。