【Css】FontAwsome5でアイコンが□になる場合の対策(Css疑似要素(:before :after)利用時)

  • このエントリーをはてなブックマークに追加

FontAwesome5のWebアイコンをCss疑似要素(:before :after)で挿入する際、アイコンが”□”になって正しく表示されない場合があります。全てのアイコンで起きる訳では無く、正しく表示されるアイコンもあり、対処法を見つけるのに非常に時間がかかりました。

 Fontawsome5のアイコンをCssの疑似要素で挿入

アイコン挿入方法として、Html内にiタグを貼り付ける方法と疑似要素を利用して挿入する方法の2種類あります。アイコン表示方法は、下記の記事で詳しく説明しています。

https://empitsublog.com/scss-mixin-fontawsome/

 Fontawsome5のアイコンをCss疑似要素で挿入する場合の注意点

font-familyの指定


font-familyに指定する値は、アイコンの種類により以下のようになります。
・無料版(FREE版):font-family:”Font Awesome 5 Free”; 
・アイコンがBrands:font-family:”Font Awesome 5 Brands”; 
・有料版(PRO版):font-family:”Font Awesome 5 Pro”; 

font-weightの指定


文字の太さ(font-weight)を必ず指定してください。また、挿入するアイコンによって指定するfont-weightの値が異なるので注意してください。

●無料版(アイコンがBrandsの場合も含む)

style font-waight
Solid 900
Regular 400
Brand 400

FREE版のアイコンを利用し、:before(疑似要素)でアイコンを挿入するスタイルを下記に示します。

【class= “fas” のアイコン例】

●Css

【class= “far” のアイコン例】

●Css

【class= “fab” のアイコン例】

●Css

クラス名が「fas」から始まる場合は、font-weight: 900。クラス名が「far」「fab」から始まる場合は、font-weight: 400の指定が必要です。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*