Font Awesome 5 がリリースされた

no extension

現在 Font Awesome のバージョンは 4.x 系と新しくリリースされた 5 系のふたつがあるようで, 5 系ではサポート・サイトも新しくなっている。

Version URL
4.7 fontawesome.io
5.0 fontawesome.com

5 系では従来のフリー版の他に Pro 版も用意されていて, Pro 版では千個以上のアイコンや関連ツールが用意されている。

フリー版では CDN による配信もあるようで, BootstrapCDN を使わなくともよくなった。

CSS はこんな感じで指定できる。

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

5 系で最も大きく変わったのが HTML 上のアイコン名。 たとえば 4.x 系で PDF ファイルを表すアイコンは

<i class="fa file-pdf-o"></i>

だったが, 5 系では

<i class="far file-pdf"></i>

になった。 4.x 系から 5 系への変更については,以下が参考になる。

アイコンのサイズ指定やアニメーション機能などについては従来のやり方がそのまま使えるようだが, 5 系では, Web フォントではなく, SVG と JavaScript を組み合わせた方法がオススメらしい。

アイコン制御用の JavaScript も CDN で用意されている。

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

アイコンの指定の仕方は Web フォント版と同じ。

<i class="fas fa-sync fa-2x fa-spin"></i>

このサイトでも JavaScript 版を導入した。 本家サイトは… しばらく放置の方向で(笑)

ブックマーク