Font Awesome 5になってから擬似要素でアイコンが表示されない時の対応策

Font Awesomeのバージョンが「4」から「5」になってから、擬似要素でアイコンが表示されないことがしばしば起きました。

その時の解決策を本記事で紹介したいと思います。

エラーが出た時の環境

・Font AwesomeはCDNでの読み込み

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

・疑似要素で使用

::before{
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
}

原因

Font Awesome 5からの新しい仕様により、アイコン自体に太さのバリエーションが追加されたそうです。そして、太さの種類がSOLIDの場合、font-weight: boldを指定しなければ表示されないみたいです。

アイコンのページが以下のような場合、右側に種類が書かれています。

アイコンに太さのバリエーションが存在しない場合は、以下のようなページになります。

この場合はfont-weightを指定しなくても大丈夫です。

まとめ

Font Awesomeのような外部サービスを使う場合は、アップデートされて仕様が変わったら、その都度対応が必要になる場合があります。最近ではGoogleMapにAPIキーが必要になったのが良い例だと思います。

なので、外部サービスを使う場合は、そのような懸念点があることを前提に使用するようにしましょう。