mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

Awesomeのアイコンが「表示されない」小まとめ


GoogleSearchConsoleで掲載順位を眺めていた所、ここのブログではAwesomeのアイコン関連のワードが上位を独占しています。

たしかに僕もブログを作りたての頃はAwesomeのアイコンが表示されない事については結構悩んでいました。

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

Awesomeのアイコンはhtmlの<i class="fab fa-amazon"></i>の様なこの手のやり方だと簡単にな感じに表示出来るのですが、良く見るのはが上手く表示されていません。

のようなに少しの間違いだけで表示されないのは非常に悔しいと思います。

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">