Font Awesome のCSS版とJS版は何が違うの？

Tweet

Category css, develop, JavaScript 2019/11/11

問題

Font Awesome に、CSS版（Using Web Fonts with CSS ）とJS版（Using SVG with JavaScript、SVG版）があるけど、何が違うの？

答え

CSS版は、CSS+Webフォントになる。

JS版（SVG版）はJS+SVGになる。

CSS版

• CSS+Webフォント
• スタイルシートなので、IE10でも問題ない。
• <i class=”fas fa-user”></i> とHTMLに書けば、書いた通りのHTMLになる。

JS版（SVG版）

• JavaScript+SVG
• JavaScriptのMutationObserverを使用しており、IE10に対応していない。
• <i class=”fas fa-user”></i> とHTMLに書くと、表示後 <svg>～</svg> に置換されるので、<i></i>要素が残っている前提で何かしていると困るかもしれない。

どちらが良いのか？

読み込むファイルがJavaScript 1ファイルで済むので、モダンなブラウザではJS版でよいでしょう。

<script defer src="/your-path-to-fontawesome/js/all.js"></script>

IE10など幅広い環境に対応する必要がある場合、ファイル数を気にしない場合、勝手にHTMLが書き換えられると困る場合、JavaScriptに依存しないスタイルシートだけの素直な実装がよい場合はCSS版でよいでしょう。

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

ファイルサイズの面では、JS版の全部入りの all.js で1MB以上あるので、Webフォントのファイルサイズと比較すると、似たり寄ったりな気がします。

変わったアイコンは使わない場合は、基本的なものだけに限定すると容量を節約できます。all.js 以外の小さいJSを読み込むようにします。

all以外を使うときは、個別のを読んだ後に fontawesome.js を読み込むこと。regular.min.js + fontawesome.min.js のみにすると 141KBで済みます。

 1.2M    all.js
 1.1M    all.min.js
 427K    brands.js
 420K    brands.min.js
  33K    conflict-detection.js
  14K    conflict-detection.min.js
  77K    fontawesome.js
  36K    fontawesome.min.js
 105K    regular.js
 101K    regular.min.js
 575K    solid.js
 562K    solid.min.js
  18K    v4-shims.js
  15K    v4-shims.min.js