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

2018.08.14 2021.05.19 HP制作

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にはめちゃくちゃお世話になっていますが、正直4の方が使いやすかったなーと思う今日この頃です。

追記：2019/11/07

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

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

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

追記：2020/12/23

各アイコンごとに指定すべき weight があるようです。

分類 説明 font-weight 接頭辞
SOLID 通常アイコン、白抜きのもの 900 fas
REGULAR アウトラインをとったようなもの 400 far
LIGHT 線が細いもの 300 fal
BRANDS ブランドロゴ 400 fab
Related Posts