Font Awesome 5をCSSの疑似要素で使う方法

Font Awesomeを使う際、<i>タグを挿入する代わりにCSSの疑似要素で表示させている、という方も少なからずいらっしゃるのではないでしょうか。
かく言う私もその一人ですが、Font Awesome 5が2017年末にリリースされ、How to Useをよく読まないまま今まで通りに使おうとしたところ、上手く行かずに右往左往する羽目になりました。
そこで備忘録も兼ねて、Font Awesome 5を疑似要素で使う方法をご紹介したいと思います。

この記事の内容

Web Fonts with CSSの場合
SVG with JSの場合

Web Fonts with CSSの場合

Font Awesome 5ではSVGとJavaScriptを使った新しい表示方法ができ、公式サイトではこちらの利用が推奨されていますが、これまで同様WebフォントとCSSでの使用も可能です。

CDNはこちら。

HTML

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

そして、CSSはこうなります。

CSS

.class::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f007";
}

4.xと変わった点は、font-familyが単なる”Font Awesome 5″ではなく、無料版では”Free”とつくようになったこと。
また、font-weightを指定するようになりました。

Solidは900
RegularまたはBrandsは400
Lightは300

Solid / Regular / Lightの違いはそれぞれのアイコンのページで確認できます。
Lightは有料版（PRO）になります。
ブランドのアイコンにはSolid / Regular / Lightの区別がありません。

SVG with JSの場合

SVGとJavaScriptで描画する場合です。

JavaScript

<script>
  FontAwesomeConfig = { searchPseudoElements: true };
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

大事なのはFontAwesomeConfigの部分。デフォルトではfalseになっているため、これを書かないと表示されません。

CSSはこちら。

CSS

.class::before {
  display: none;
  font-family: "Font Awesome 5 Solid";
  content: "\f007";
}

font-familyには、”Font Awesome 5 Solid”、”Font Awesome 5 Regular”、”Font Awesome 5 Light”、または”Font Awesome 5 Brands”のいずれかを指定します。

ただし、公式サイトではSVGとJSのバージョンでこの方法を取ることを非推奨しています。
いろいろあるオプションの利用が限られるし、設定が難しいし、Font Awesomeを使うにあたって一番遅い方法とかなり強めに警告されています。
普通に<i>タグを使用するか、どうしても使うならCSSのバージョンでやる方が良さそうです。

Font Awesome 5ではアイコンを組み合わせたり、回転させたりが簡単にできるようになっていますが、そのためにはやはり素直に<i>タグを使うべきなので、今後はそうしていこうと思います。
水平・垂直方向の位置を細かく調整できるのが特に便利そうですね！

【無料お役立ち資料】
初心者でもよくわかるお問い合わせを増やすWEBサイトの作成方法