Font Awesome Kit

Font Awesome Kit は最初に提供された JavaScript ファイルを読み込むだけで自動的に HTML に含まれる Font Awesome 関連の要素を見つけ出し、対象の使っているフォントだけを読み込み適用できます。これにより、使うものだけを svg で切り出して使うといったことをせずとも常に必要最低限のデータしか読み込まないサイトを作れます。

Font Awesome Kit はログイン後fontawesome.com/startから作れます。

作成すると画像のように上部に<script ...>のコードがあるはずです。なんとこれを自分の HTML に貼るだけで後はこのスクリプトがよしなにしてくれます!

(🤔一応試したのは<i class="fab fa-font-awesome"></i>のような形だけなので、違う要素などでもいけるのかは不明です)

スクリプトの中で何をしてるかざっと

中ではMurationObserverAPI を用いてdocumentを監視しています。有効になってるオプションはchildListsubtreeの2つなので恐らく、「何かしらノードが追加または削除された時にfa-*クラスが付いている要素などを見つたら、それが使っているアイコンを読み込む」ようなことをしてるのではと考えます。

// 対象の部分
new MutationObserver(n).observe(document,{childList:!0,subtree:!0}))