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

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

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

資料内容

WEBサイト作成の流れと説明

各フェーズでの重要ポイント

問い合わせを増やすための最終チェックリスト

制作後の運用方法

制作の進め方と注意すべき点

サイト制作を依頼する際に知っておくべき内容になっていますのでぜひ無料でご覧ください。

資料ダウンロードはこちら

この記事の内容

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サイトの作成方法