Font Awesome Icon (Ver5)になって表示されないフォントがあって困った件について

Font Awesome Iconのバージョンが5になりました。

Font AwesomeはFreeのアイコンでも十分に使える素晴らしいフォントです。バージョンアップでアイコンが増えたことや、スクリプトでのロードも追加されたりしています。ウィンドウズのアイコンも追加されてますね！

新しいもの好きのぼくはさっそく、バージョン5に入れてみましたが、表示されない（いわゆる豆腐）アイコンがありました。

表示されないアイコン

それが、です。

状況としては以下のような感じです。コードも載せときます。

• 疑似要素で使用している
• モバイルからはちゃんと表示されている
• PCからだと表示されない（豆腐表示）

CSS

.breadcrumb li:first-child a:before {
  font-family: "Font Awesome 5 Free";
  content: '\f015';
}

どうやって解決する？

うーん。Unicodeも間違っていないんだけど。
とググっていると、font-weightの指定をしないと表示されない場合があることが分かりました。

さっそく、font-weightを追加したところ、確かに表示されました！

CSS

.breadcrumb li:first-child a:before {
  font-family: "Font Awesome 5 Free";
  content: '\f015';
  font-weight: 900;
}

最後まで読んでいただき、ありがとうございます。
また読んでくださいませ。
そんじゃーね。

関連記事