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

FontAwesome擬似要素

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 Awesome 5 Freeの場合はfont-weightに900を指定します。

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

Font Awesome 5 Brands

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

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

まとめ

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

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

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

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

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.