「Font Awesome」をCSSの疑似要素で指定した際に、アイコンが表示されなかったり、文字化けしたりする場合の解決方法です。
結論から言うと「font-weight」を指定します。
例えば、リスト要素の頭に矢印アイコンを表示する場合は下記のようになります。
ソース
.sample li:before {
font-family: 'Font Awesome 5 Free';
content: "\f054";
}
font-family: 'Font Awesome 5 Free';
content: "\f054";
}
これだとアイコンが表示されませんが、下記のように「font-weight」を指定すると表示されます。
ソース
.sample li:before {
font-family: 'Font Awesome 5 Free';
content: "\f054";
font-weight: 900;
}
font-family: 'Font Awesome 5 Free';
content: "\f054";
font-weight: 900;
}
「Font Awesome バージョン5」を疑似要素で指定する場合は、そのアイコンのスタイルに応じた「font-weight」を指定する必要があります。
フリーで利用する場合は、多くが「SOLID」になると思いますので、「font-weight」は「900」に指定しておくと大体は表示されます。