How to2020.06.30

FontAwesomeを擬似要素で表示するにはfont-weightを設定

FontAwesomeで指定は正しいはずなのにCSSの疑似要素で表示されない・・。

1度ハマって解決方法を知っていても久しぶりにFontAwsomeを使うと忘れてしまう対処法。
仕様がFontAwesome独特のルールということもあり、もうハマりたくない。

そんな戒めの意味も込めてFontAwsomeの疑似要素対策を書きます。

目次

FontAwesomeを疑似要素で表示するにはfont-weightが必要

FontAwesomeを擬似要素だと表示できない原因はfont-weightの指定漏れが大半です。

ドキュメントを見るとちゃんと記載はあるのですが、何回も使っているうち見ずに実装してしまい「なんで表示されないの・・」とハマることが大半。

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

無料版で利用している場合はFont Awesome 5 FreeかFont Awesome 5 Brandsをfont-familyで指定することになります。

それぞれで必要なfont-weightの数値が決まっています。

全体的な必要最小限のコードは下記です。

Font Awesome 5 Freeの場合はfont-weightに900を指定します。

1
2
3
4
display: inline-block;
content: 'アイコンの指定コード';
font-family: Font Awesome\ 5 Free;
font-weight: 900;

Font Awesome 5 Brandsの場合はfont-weightに400を指定します。

1
2
3
4
display: inline-block;
content: 'アイコンの指定コード';
font-family: Font Awesome\ 5 Brands;
font-weight: 400;

ドキュメントに記載されているとはいえ、**FontAwesome独自のルールであるfont-weightの指定はうっかりしてしまいがち**です。

scssなどでmixinにして使いわますような対策は取れますが、プロジェクトをまたぐとどうしても漏れが発生する可能性もあります。

もう擬似要素で表示するときにはfont-weightが必要と強く意識するしかない、というのがなんだかスッキリしません。

無料でもクオリティの高いアイコンが使えるので、FontAwesomeは重宝しているライブラリですが擬似要素のところだけなんとかならないかな・・とハマるたびに思ってしまいます。