Font Awesome 5 FreeでCSSの疑似要素で指定すると表示されない

今回、Font Awesome 5 Free版で4.7の古いバージョンと同じようにCSSの疑似要素で使ったら表示されなかったのでメモ。

Font Awesome 5 Free版をCSSの疑似要素で使うと表示できない

状況

Font Awesome 5 Free版 WebfontのCSS、CDNを使用

今回は、「External Link」のアイコンを使いました。

これを表示したい

HTMLでの指定方法

<i class="fas fa-external-link-alt"></i>

<!-- Unicode f35d -->

CSSの疑似要素(:after,:before)のcontentで指定する

今までの指定方法

CSSの疑似要素(:after,:before)のcontentで指定する場合、前のバージョン(4.7)では、cssでfont-familyfont Awesomeのものを、contentUnicodeで指定すれば表示できていましたが、新しいバージョンでは表示されませんでした。。

/* これだと表示されない。。。 */
a::after {
    font-family: "Font Awesome 5 Free";
    content: "\f35d";
}

表示されない。。。

font-weightの指定で解決!

調べると、詳細はこちらでまとまっていました!

font-weight: bold;を指定したら良さそうなので、font-weight: bold;を指定すると、表示できました!

a::after {
    font-family: "Font Awesome 5 Free";
    content: "\f35d";
    font-weight: bold;/* 表示はOKですが、下で900に変更しています */
}

まとめ

今回は、WebfontのCSSの方を使いましたが、SVGに置換してくれるJS版もあるようですね。

JS版はそのうち使ってみたいと思います。