FontAwesomeアイコンがPCでだけ表示されないときの対処法【Version５】

FontAwesomeアイコン（SOLIDタイプ）をCSSの疑似要素「::before」で配置する際に、スマホでは正常に表示されたのに、なぜかPCで閲覧した時だけ何も表示されなかった場合の対処法を紹介します。

結論。「font-weight:900;」を追加で指定してあげるだけで直ります。

どうやら、FontAwesomeのVersion５からはCSSでアイコンを実装する際に「SOLIDタイプならfont-weight:900を、REGULARタイプなら400」をそれぞれ指定する必要があるそうなのです。

ぼくが実際に使ったコードは以下となります。参考になれば幸いです。

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