#Font Awesome 5

公式ページ

具体的な導入の仕方は公式にも書いてますし、日本語で教えてほしかったらググったら先人の記事が出てきます。

#この記事で書くこと

versionが5系になってから導入方法（描画方法）が大きく分けて2種類選べるようになりました。

js+SVG
Web Font+css

WordPressで作成するときにFont Awesome 5を組み込むとなると、
どちらにせよファイルをDLする必要があるのですが、その話は置いときます。

んで、なんとなくでjs+SVGを選んでいたのですが訳あって最終的にはWeb Font+cssの方法を採用しました。
その経緯、つまりそれぞれ何ができて何ができないのかを備忘録としてまとめておきます。

##共通

Font Awesome 4同様に<i>タグでどのアイコンを出力させるかをclassで指定します。

<i class="fab fa-twitter"></i>

class="fab"は「企業ロゴなどのグループから表示する」ということを示します。
例のようにTwitterロゴやYouTubeロゴなんかがあります。
fabの他にもfas、farなどがありますが詳しくは公式サイトのリストで確認してください。
サンプルコードにセットで書いてあるのでそのままコピペでいけます。

class="fa-Twitter"は「Twitterロゴを表示する」ということを示します。
詳しくは公式（略）

どちらの方法でも疑似要素に描画することもできますが、
js+SVGの方法で行うのは力技感あるからなのか非推奨となっています。

(追記：2018.08.22)
こちらの記事にjs+SVGの処理詳細が記述されていました。

##js+SVG
###特徴

画面を表示した際に<i>タグはコメントアウトされ、svgタグへと置き換わります。

そのため、色を変えたり表示位置の調整などはsvg、あるいは付随するclass（.svg-inline--faなど）をセレクタとして使用する必要があります。

js+SVG特有の設定がある

公式でオススメされている要因。
描画領域に対するスケーリングやポジショニングなどのトランスフォーム指定（Power Transforms）や
複数のアイコンを重ねて描画するマスク(Masking)、
アイコンに指定したテキストを重ねるレイヤー（Layering, Text, & Counters）などがあります。

「カートと入っている商品数を描画」なんてこともできる感じです。

###できないこと

一部jsと相性が悪い（？）

実装の仕方によるとは思うのですが、すでに稼働しているサイトで扱う場合や
過去に自身で実装した処理を転用しようとした場合に、使えなくなる場合があります。

どうしてそうなるかまでは時間がなくて調べられず。

自分の場合は4系から5系に変更するという作業だったのですが、
ハンバーガーメニュー用処理で.toggleClass()を使用している箇所でループしていました。
（メニューにclass="open"を.toggleClass()で付与したり除去したり切り替える処理）
対象となる要素にclass="open"があるかによって
子要素で描画するアイコンを変化させるものだったからなのかとも思います。

ともあれ前提として、js+SVGで導入してみて、描画するアイコンを変化させる箇所で動作確認して使えるか検証してから実装という形になるのかなあと思います。

(追記：2018.08.23)
これ書いたあとに他の人が作ったサイト見てるとハンバーガーメニューでも5系で動いてるサイトがあったんで、
実装処理内容によるっぽいです。

##Web Font+css
###特徴

4系までと使い方はほぼ同じ

fa→fab、far
cssで
font-family: Awesomefont;→font-family: Font Awesome 5 Free;
となるところ以外はさほど変わらないです。

これまでのノリでサクサク進めたい人はこちらを選んでもいいかもしれません。
アイコンによってはfont-weight: bold;を指定しないといけない場合がありますが。

また、js+SVGのように<i>タグが別のものに置き換えられることもないです。

###できないこと

5系で追加された設定が使えない

js+SVGで紹介した各種設定が使えないということですね。
何が使えないかは、そこに書いてあるものが使えないということなので割愛します。

#まとめ

基本
→js+SVG

js+SVGで既存のjs処理が動作しなくなった
以前からFont Awesome使っててスピード感が欲しい
→Web Font+css

こんな感じ？

自分自身Font Awesome使うの初めてだったんでツッコミお待ちしております。