WordPressのFont Awesome 5対応

WordPressのバージョンを更新してからサイドバーのプロフィール欄や固定ページのダウンロードアイコンなどに使っていたFont Awesomeというフォントが□で文字化けして表示されなくなってしまいました。

テーマを更新したりヘッダを書き換えたり色々していましたが、下記で解決しました。

Qiita

 

19 Users

38 Pockets

Font Awesome 5 Freeで疑似要素(:after,:before)のcontent指定する場合 - Qiita

https://qiita.com/Garyuten/items/6d68da5cdac6dab9ba26

(https://fontawesome.com/)のフリー版CDNを使った場合、疑似要素(:after,:before)のcontentにアイコンを指定する方法が、ver4とちょっとだけ違っていてハマっ...

/* 通常のアイコン */
font-family: "Font Awesome 5 Free";
font-weight: 900;

/* ブランドアイコン */
font-family: "Font Awesome 5 Brands";
font-weight: 400;

こういう仕様変更は先に言っておいて欲しいものですね……