Edited at

Font Awesome 5がリリースされたぞ!

Font Awesome 5

fontawesome.com


(URLも従来の.ioから移転されました。)

v4からのアップデートガイド(英語)


更新の概要


  • お金を払ってより多くのアイコンを手に入れることができる、Proバージョンができました。


    • 無償版でも従来から比べてアイコン数が増え便利になりますが、ProではLightウェイト等の追加のアイコンを利用できます。



  • アイコンの数はもちろん増えました。




  • 導入方法が増えました。




  • アイコンの種類が明確に分かれました。



    • Solid(塗りつぶし), Regular(線・標準の太さ), light(線・細い Proのみ), Brands(ブランド)の4種類があります。


    • アイコン一覧では種類ごとに使えるアイコンを見ることができます。




  • faプレフィックスに代わり、種類ごとのプレフィックスfas,far,fal,fabになりました。


    • 例えば<i class="fab fa-line"></i>,<i class="fas fa-clock"></i>など。



  • 種類分けに併せて、アイコンの命名が変わりました


    • より論理的に、そして無垢になりました。

    • 4から利用している方は要注意です。しかしご安心ください。fa-v4-shim.jsを利用すれば、そのままで大丈夫です。


    • → アップグレードガイドを参照してください。




導入例

サイトビルダーや一般的なビルドを行うサービス等、事前処理ができる状況においては、JavaScriptの処理をビルド時にしてしまいたいと誰もが思うはずです。

npmパッケージ化によってそれができるようになりました。

以下に例を示しますが、APIの説明をすっとばして実使用の場合のみを想定しています。

詳しくはAPIの説明を読んでください。

ブラウザとnode.js双方の仕様についてたいへんわかりやすく書かれています。


例を示すと言ったな?あれは嘘だ。

公式ドキュメントを見つけたので削除しちゃいました

https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering