Awesomeのアイコンが表示されない時の確認

作成日：2019/07/16
更新日：2020/01/22

---

Awesomeのアイコン使用時に、何かしらの問題があって表示されたかった時の確認ポイントでもさらっと書こうと思う。

使用初期だった頃の非表示にはすごく悩まされました。

Awesomeのアイコンが表示されない

Awesomeのアイコンはhtmlの<i class="fab fa-amazon"></i>の様なこの手のやり方だと簡単に表示できます。例えばAmazonのアイコンだとこんな感じに【】を表示できます。

しかし、何らかの問題で正しく表示されない場合は下の例のようなアイコンとしてデザインされたものとは違った四角いブランクが表示されてしまいます。

　←失敗例

少しの間違いだけで表示されないのは非常に悔しい。

unicodeで表示する場合、例えばのコードfoc9が何らかの原因で表示されていないことをよく見ますが、ほとんどが一か所の修正で表示できる様になります。

Awesomeのアイコンが表示されない書き方

※FREE版の場合

Awesomeのアイコンを設定するコードにはfont-family: "Font Awesome 5 Free";が書かれていると思います。もし仮にfont-family: "Font Awesome”;だった場合は5 Freeを加えた font-family: "Font Awesome 5 Free";にする必要があります。

さらにのアイコンはSolidとなっているので、font-weightを900にします。

※font-familyで指定するフォントの書き方。

• [OK] font-family: "Font Awesome 5 Free";
• [NG] font-family: "Font Awesome”;

※Solid指定のfont-weightの書き方。

• [OK] font-weight: 900;
• [NG] font-weight: 400;

/*　 仮コード  */
.bars::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c9";
    font-weight: 900;
}

Brands指定やバックスラッシュ漏れ

RegularもしくはBrandsの場合は400にします。前に僕がハマったのはブランドアイコンで、ツイッターの様なブランドアイコンを表示させる時はFont Awesome 5 Freeではなく、Font Awesome 5 Brandsになります。

のような感じになって表示されてない殆どはfont-familyやfont-weightが正しく書かれていない様です。

稀にあるのがcontent: "\f0c9";のバックスラッシュ（ \ ）漏れです。

Awesomeのアイコンもバージョンがあるので、以前は表示されていたけど～なんてこともあります。

今一度確認してみてを使ってみませんか？

これでも表示出来ない場合はヘッダー内に入れてあるコードのバージョンが低いのかもしれませんね。

<!-- headに入れてみてください。 -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">

Awesomeのアイコンが削除されている可能性

ここからは2020/01/22にリライトした追記になります。

何をやってもアイコンが表示されない場合、コピペ支援サイトではコピペするだけで使えるようになっていたのに…なんて事があると思います。

もしかしたらアイコン自体が使えないようになっているかもしれません。

シートがあるので、表示されないコードを検索してみてください。シートに無ければ表示することはできません。

fontawesome.com

コピペ支援サイトでは表示できていた！などと思われるかもしれませんが、そのアイコンの表示って画像じゃなかったですか？アイコンなら文字のようにマウスで選択できるはずです。その表示をクリックしてみてください。もしかしたら画像が浮かんでくるかもしれませんね。