これまでのページにも書いていますがFont Awesome 5の使い方は、
SVG with JavaScript（JavaScriptとSVGによる描画）と
Web Fonts with CSS（CSSとwebフォントによる描画）の2種類あります。
こちらの2種類の機能比較をまとめておきたいと思います。自分で使う時のために。
機能比較表
SVG with JavaScript（JavaScriptとSVGによる描画）とWeb Fonts with CSS（CSSとwebフォントによる描画）の2種類の比較を表にまとめています。
間違えていたらすいません。
| SVG with JavaScript | Web Fonts with CSS | |
|---|---|---|
| アイコンの大きさを変える | ○ | ○ |
| 等幅サイズ（幅を揃える） | ○ | ○ |
| リストアイコンとして使う | ○ | ○ |
| アイコンを線で囲う | ○ | ○ |
| アイコンの右寄せ、左寄せ | ○ | ○ |
| 回転 | ○ （角度は自由） |
△ （角度は90,180,270度のみ） |
| 反転 | ○ | ○ |
| 拡大縮小 | ○ | × |
| 移動 | ○ | × |
| マスク | ○ | × |
| アイコンを重ねる | ○ | △ （二つを重ねるのみ） |
| アイコンにテキストを重ねる | ○ | × |
| 擬似要素で使用 | △ （非推奨） |
○ |
| ブラウザサポート | IE10以上 | IE9以上？ |
ブラウザサポートに関しては、最初に記事にしたver5.06の時点では、Web Fonts with CSSではIE9以上の表記がありましたが、ver5.5の時点では公式ページで確認できませんでした。
それぞれの比較
上記のSVG with JavaScriptとWeb Fonts with CSSの2種類ので機能で違いがある箇所をそれぞれまとめておきます。
各機能のそれぞれの使用法へのリンクもつけてあります。
回転
SVG with JavaScriptはdata-fa-transform属性にrotate-#を追加することでアイコンの回転が出来ます。
角度は自由でマイナスの値も有効。
Web Fonts with CSSはfa-rotate-*クラスを追加することでアイコンの回転ができます。
角度は90,180,270度のみ。
反転
SVG with JavaScriptはdata-fa-transform属性にflip-v（垂直反転）、flip-h（水平反転）を指定することでアイコンを反転できます。
Web Fonts with CSSはfa-flip-horizonta（水平反転）、fa-flip-vertical（垂直反転）クラスを追加することでアイコンが反転できます。
拡大縮小
SVG with JavaScriptはdata-fa-transformという独自データ属性にgrow-#（拡大）または、shrink-#（縮小）を追加することで拡大または、縮小ができます。
Web Fonts with CSSでは、利用できません。
移動
SVG with JavaScriptはdata-fa-transform属性にup-#（上）, down-#（下）, left-#（左）,right-#（右）を追加することで移動ができます。
Web Fonts with CSSでは、利用できません。
マスク
SVG with JavaScriptは切り抜かれる側のアイコンをdata-fa-mask属性にすることでアイコン同士のマスクができます。
Web Fonts with CSSでは、利用できません。
アイコンを重ねる
SVG with JavaScriptは重ねるアイコンタグ全体をspanタグなどで囲いfa-layersクラスを追加することでアイコンを重ねることができます。
複数重ねることも可能。
Web Fonts with CSSでは、単純に2倍の大きさのアイコンと通常サイズのアイコンを重ねることしか出来ません。
アイコンにテキストを重ねる
SVG with JavaScriptは重ねるアイコンタグ全体をspanタグなどで囲いfa-layersクラスを追加、重ねるテキストを囲うspanタグなどにfa-layers-textクラスを指定することでアイコンの上にテキストを重ねることができます
Web Fonts with CSSでは、利用できません。
擬似要素での使用
公式では新しいSVG with JavaScriptの使用を推奨していますが、唯一機能で非推奨なのが擬似要素での使用。
残念ですが、使用はできます。出来れば擬似要素で使用したい場合は他の方法の方が良いようです。
Web Fonts with CSSでは、cssに色々設定、指定するこで利用できます。
ブラウザサポート
大きな違いはIEのサポート範囲のみかと思います。
ver5.5の時点では公式ページで確認できませんでした。
関連ページ
それぞれの使い方などのまとめページは下記リンクへ。
新しいFont Awesomeの使い方のSVG with JavaScriptで利用したい方は下記ページへ
これまでの使い方と同じWeb Fonts with CSSを利用したい方は、下記ページへ。
ざっくりとFont Awesome 5の内容や4の違いなどをまとめたページ
参照ページ
記事にする際に参考にさせていただいたページ。
