疑似要素のFont Awesomeが表示されない原因

つい先程「PayPayのネットショッピング対応まとめ」を書いたときに引っかかったので同じ問題につまずいた人の為に残しておきます。

疑似要素に指定したfont awesomeが表示されない

普段は自分が必要な分だけ用意したsvgアイコンをひとまとめにして使っているので、あまりfont awesomeは使わないのですが、WordPressのテーマには元々font awesomeが入っている場合が多いので、せっかくなら使おうかと思った矢先に表示されない事態が発生。

::before ::after などで指定したfont awesomeが文字化けする

具体的には、テキストリンクの後ろに疑似要素で「　　」をつけようとしたら、文字化けして表示されないという状況。

なお期待しているのはこんな感じです。

リンク

原因　font-weightが必須のアイコンがある

最初、必要最小限のcssだけを書いていたので徐々に指定を加えていくと無事表示されました。

それでわかった原因は「 font-weight の指定がなかったこと」

しかし、これまで問題なく表示されていたアイコンもあるので、全部が全部font-weight必須というわけでもないのかも知れません。

それとも、font awesome 5になってから仕様が変わったのでしょうか。

いずれにせよ、疑似要素のfont awesome文字化けに困っている場合は、font-weight:900を指定してみてください。

アイコンの種類別 font-family一覧