niwaka-web

webサイト構築関連のにわか知識集

CSS Font Awesome JavaScript

Font Awesome 5の使い方【SVGとWeb fontsの比較】

投稿日:2018年2月10日 更新日:

これまでのページにも書いていますが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の違いなどをまとめたページ

参照ページ

記事にする際に参考にさせていただいたページ。

-CSS, Font Awesome, JavaScript
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【CSS】属性セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 使いこなせてないCSSセレクタ第4弾「属性セレクタ」の覚書。 目次 属性セレクタの概要 属性セレクタの使用例 個人的メモ …

【CSS】擬似クラス「構造擬似クラス」の使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似クラスは数が多いので、まずは「構造擬似クラス」の覚書。他の擬似クラスは別ページで作成予定。 「擬似要素と擬似クラスの違いの覚 …

【CSS】flexboxの使い方の覚書

ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 flexboxの覚書。 仕様がよく変わり、IEの対応が遅れていたこともあり便利そうだがなかなか使えませんでしたが、そろそろ使えそ …

【CSS】子セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 サイト作成をする際にCSSは何百行、何千行にもなることがあるので、出来るだけわかりやく汎用的に書ける様にするために覚えて …

【CSS】間接セレクタの使い方の覚書

ニワカが個人的に使いこなせていないCSSセレクタを覚えるための個人的メモです。 使いこなせてないCSSセレクタ第3弾「間接セレクタ」の覚書。 目次 間接セレクタの概要 間接セレクタの使用例 個人的メモ …