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

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

Font Awesome5

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

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;]の指定がいるようです。

Font Awesome 5

う~ん、わかりにくい!

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

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

こんな記事も読まれてます

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

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

最新情報をお届けします

コメント