onepage

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

Web Fonts with CSSの場合

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

CDNはこちら。

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

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で描画する場合です。

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

CSSはこちら。

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>タグを使うべきなので、今後はそうしていこうと思います。
水平・垂直方向の位置を細かく調整できるのが特に便利そうですね!

The following two tabs change content below.
ワンページ編集部
名古屋に拠点を構えて、ホームページ制作やデジタルマーケティングを通してネット集客を行っています。ワンページ編集部が、当メディアを通して初心者の方にもわかりやすくウェブの情報を伝えていきます。