FontAwesomeのアイコンが表示されない場合の対処法！
FontAwesomeは画像やテキストなどを用いるよりも簡単にアイコンを追加できます。FontAwesomeのアイコンが表示されないときの対処法を解説します。表示されない理由は色々ありますがこの記事を見ながら1つずつポイントを確かめていきましょう。
FontAwesomeのアイコンが表示されない問題
FontAwesome利用時に「□」このような四角が表示されてしまい、アイコンが表示されないときありますよね。
この記事ではそのような場合の対処法を解説します。
FontAwesomeのアイコンが表示されない場合の対処法
アイコンが表示されない理由は色々な要因があげられます。
対処法をポイントごとに解説します。
CDNコードがしっかりと貼れていない
FontAwesomeのアイコンをサイトに読み込むためにはCDNコードを必ずheadタグの中に記述しなければいけません。
しかし、このコードに不備があるとFontAwesomeを読み込めず、「□」のような四角が表示されてしまいます。
以下のCDNコードをheadタグ内に記述すれば解決します。
CDNコード
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
しかし、このコードにもバージョンがあり、古いバージョンだと表示されない場合もありますので、FontAwesomeのサイトから最新のコードを取得するようにしてください。
スマホで表示されない場合
CDNコードをしっかりと記述してもスマホで表示されない場合があります。そのよう場合はHTMLのheadタグの中で記述するのではなく、CSSの先頭で@importを利用します。
CDNコード
@import url(//use.fontawesome.com/releases/v5.6.3/css/all.css);PRO版のアイコンを使用している
アイコンには無料で利用できるものと、有料のものがあります。有料であるPRO版のアイコンを使用しようとすると「□」と表示されてしまいます。
無料で利用する場合、使用できるのは無料版のみですので、PRO版を使用しようとしていないか確かめてください。
その方法はFontAwesomeのサイトでアイコン一覧を表示したときに、アイコンの背景が濃いものが無料、薄いものはPRO版となっています。
ここを間違えてしまうと表示されないので注意してください。
CSSの設定が間違っている(疑似要素利用時)
ここではHTMLのクラスによる表示でなく、CSSで疑似要素として表示したいのに表示されない場合の対処法を解説します。
CSSでアイコンを正しく表示するためにはfont-familyプロパティ、font-weightプロパティ、contentプロパティの3つを正しく記述する必要があります。
以下のサンプルコードを参考にしてください。
疑似要素利用時
.class::before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f521";font-familyプロパティは上記のようにFont Awesome 5 Freeと記述してください。
font-weightプロパティは無料版の場合400か900で指定してください。こちらの指定が間違っている場合もアイコンが表示されない場合があります。
注意すべきはcontentプロパティです。FontAwesomeのサイトからUnicodeをコピーし、貼り付けるときに先頭に「\」（バックスラッシュ）をつけないと表示されません。
まとめ
FontAwesomeが表示されない場合の対処法を解説しました。
またCDNコードを使用せずアイコンをローカル環境に落としてから利用する方法もありますが、表示されない場合は同様の対処を行うことで表示されるようになります。
