Font Awesomeのバージョンが5になって、有料版と無料版の二パターンになった。
- 4.7.0だと675アイコン
- 5.0.6(無料版)だと929アイコン
- 5.0.6(有料版)だと2316アイコン(無料版のアイコン含む)
Font Awesomeお世話になっているし、アイコン多いほうが嬉しいので課金した。リリース前だったので少し安くて$40だったはず(今は$60)。
Font Awesome5の導入の仕方はいくつかある。webサービスで使う場合は大きく次の２つ
- jsでsvgを使う方法
- cssとfontを使う方法
公式的にはjsの方がオススメとのこと。
js版のインストール方法と気をつける点
無料版はnpmパッケージとしても提供されているけど、有料版はパッケージがないみたいなので有料版を使う場合は公式サイトからファイルをダウンロードする必要がある。sprocketsもしくはwebpackerでも、どちらでもダウンロードしたものを読み込めば動いた。
js版、ファイル読み込み時にフォント用のクラスをsvgに置き換えるということをしているので、turbolinksを使っているとうまく動かない。次のようにturbolinks:loadイベントをフックしてsvgへの置き換え用のメソッドを実行してやるとうまく動く。
$(document).on('turbolinks:load', () => { window.FontAwesome.dom.i2svg() })
css版のインストール
css版も一応検討したけど、sprockets経由で利用するにはcssからfontへのパスの解決が面倒(ファイル名にdigestが含まれてしまう)なのでjs版にした。4.7.0であればそのへん解決したfont-awesome-sassというgemがあるので、もしこれが5対応になったらこれをGemfileに入れるだけで良いのかもしれない。
(追記)5に対応したバージョンリリースされたみたい。
