【CSS】Font Awesome 5を疑似要素で指定するとアイコンが表示されない時の解決方法

Font Awesome 5で、CSSの疑似要素(::before, ::after)でcontent指定をした際、アイコンが表示されない場合の解決方法です。

FontAwesome

これ、かなり罠な感じなのでハマる人も多いんじゃないでしょうか…

関連記事:FontAwesomeのリンクホバーの下線をテキストだけにする方法

Font Awesome 5で一部のアイコンが表示されない

CSSの疑似要素を使ってFont Awesome 5のアイコンを指定する場合、こんな感じで記述します。

a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f35d";
}

で、問題はここから。このようにCSSの疑似要素で指定すると、なぜか一部のアイコンだけが表示されない場合があります。もちろん、ユニコードはあっていて、アイコンが入っていない(バージョンが古い)わけでもありません。

調べてみたところ、どうやら一部のアイコンは[font-weight: 900;]を指定しないと表示されないようです([font-weight: bold;]でもOK)。

a::after {
  font-family: "Font Awesome 5 Free";
  content: "\f35d";
  font-weight: 900;
}

このように記述したら無事表示されるようになりました。

Font Awesome 5のアイコン詳細ページで「SOLID」となっている場合は[font-weight:900;]、「Regular」の場合は[font-weight:400;]の指定が必要なようです。

Font Awesome 5

う~ん、わかりにくい!

Font Awesomeにはめちゃくちゃお世話になっていますが、正直4の方が使いやすかったなーと思う今日この頃です。

created by Rinker
モリサワ
¥28,363 (2019/11/17 07:04:37時点 Amazon調べ-詳細)

追記:2019/11/07

いつぞやかのアップデートで上記の方法でアイコンが表示されなくなりました。

めっちゃハマったのですが、どうやら[font-family]を「Font Awesome 5 Free」から「Font Awesome 5 Pro」に変えたら表示されるようです。使ってるのは無料版なのですが…なぜ?

ちなみにTwitterやFacebookなどのブランドタイプのアイコンは「Font Awesome 5 Brands」を指定すればOKです。

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

コメント