このブログでも各所に「Font Awesome」を使用していますが、何故か表示が□になってしまい、上手く表示できない事が多々ありました。
その原因をようやく突き止めたので、対処法をご紹介します。
ちなみに、ここでは最新バージョンの「Font Awesome 5」の無料版を使用している事を前提に記載しております。
また、おおよそ原因のコードが判明している場合は、目次の「HTML、CSSのコードを修正する」までジャンプして下さい。
Font Awesomeが上手く表示されないときの対処法
大きく３つのステップを踏んで修正していきます。
使用しているFont Awesomeバージョンの確認
「ダッシュボード」→「設定」→「詳細設定」→「検索エンジン最適化」の欄にある「headに要素を追加」に記載されているコードを確認します。
上記のようなコードが書かれているかと思いますが、この「https://〜/v5.0.6/〜」の部分を見て「vX.X.X」が最新のバージョンで書かれているか確認して下さい。
なお、現在の最新バージョンがいくつなのかは、下記のページで確認できます。
最新バージョンになっていなかった場合、先程のURLの「vX.X.X」の部分を最新バージョンの数字に修正してください。
上手く表示できていないコードを特定する
ご自身のブログのHTMLやデザインCSSのソースコードを確認し、Font Awesomeのアイコンを使用しているコードを特定します。
おそらく、HTMLでは<i class="フォントのコード">〜</i>という形で、CSSではfont-family: 〜;とその近くにあるcontent: 〜;の形で書かれていると思います。
これらをたよりに、不具合が起こっているコードの場所を特定して下さい。
HTML、CSSのコードを修正する
HTMLとCSSで、それぞれ修正のやり方が異なるので、ご自身のパターンに該当する方の修正方法を参照下さい。
【HTMLの場合】
下記のページから再度アイコンを検索し、<i class="フォントのコード">〜</i>の部分を最新バージョンのフォントのコードに修正して下さい。
【CSSの場合】
特定したコードの「font-family」の記載がfont-family: Font Awesome;となっていたら、font-family: "Font Awesome 5 Free";に修正して下さい。
また、すぐ近くにある「content」の「\フォントのUnicode」のUnicodeも念のため最新バージョンのコードから変更がないか確認しましょう。
確認方法は、HTMLの場合と同様に公式ページからアイコンを検索して下さい。
上記の方法でも上手く表示できない場合、「font-family」プロパティが入っているセレクタ内に「font-weight: bold;」を追加してみて下さい。
（例）.samlple {
〜
font-family: "Font Awesone 5 Free";
font-weight: bold;
〜
}
Font Awesomeが上手く表示されない原因
表示が□になってしまう原因は、主に以下の２つでした。
- 参照しているバージョンに対応した書式でコードが記載されていない
- font-weightを指定していない
①の原因は、HTMLで記載するときもCSSで記載するときも関わってくるものです。
②の原因は、CSSで記載するときに関わってくるものです。
バージョンに対応した書式でコードをが記載されていない
2017年末頃にアップデートが加えられ、これに伴いアイコンを表示するためのコードが変更になったようです。
そのため、2018年現在で最新の「Font Awesome 5」を使用するためには、このバージョンに合わせた形でコードを書いてやる必要があります。
もし、ご自身のブログが５よりも前のバージョンを使用していれば特に問題はありませんが、最新のバージョン５を使用している場合は、旧書式でコードが書かれていると上手く表示されない場合があります。
上記の対処法に書いてあるとおり、HTMLの場合はフォントコードが変更になっていたり、CSSの場合はfont-familyの書き方が変更されています。
font-weightを指定していない
最新のバージョン５の無料版を使用している場合、「font-weight」を「bold」または「900」で指定してやる必要があるようです。
これに気づかなかったため、何で表示されないのかずーっと悩んでました；；
参考サイト様には本当に感謝です＞＜
参考サイト様
今回、参考にさせて頂いたサイト様はこちらです。感謝！
