TwitterやFacebook等のリンク用のアイコンとしてよく使われるFontAwesomeだが、今回はこれをRailsアプリケーションに導入する方法を記述していく。
FontAwesomeのサイト
https://fontawesome.com/
こちらのサイトから利用する。Proと付いているものは有料だが、それ以外であれば無料で使える。
前提
RailsにFontAwesomeを導入する方法として2通りある。
gem 'font-awesome-rails'を利用するか、gem 'font-awesome-sass'を利用するか
の2種類。
FontAwesomeが導入できるという点では変わらないが、違いとしては、
'font-awesome-rails'ではfa_icon, fa_stacked_iconの二種類のヘルパーメソッドが使用できるが、最新版のfont-awesome5に対応していない
'font-awesome-sass'では上記二種類のヘルパーメソッドが使えないが、最新版のfont-awesome5が利用できる
という事。
エラーは出ないけど表示されないなと思ったらfont-awesome-railsでfont-awesome5のアイコンを使おうとしていた。
また、fa_iconやfa_stacked_iconを使っているのにundefined methodと怒られている場合はfont-awesome-sassを使っている、という点に気を付けよう。
先に結論を言うと
gem 'font-awesome-sass'を使いましょう。新しいアイコンも使いたくなるでしょうし。
下に記述するが、fa_iconが使えないだけで他の記述で使えるので。
導入手順（font-awesome-sass）
今回は例としてbookを導入する。
①gemを記述する
gem 'font-awesome-sass', '~> 5.4.1'
②bundle installを行う
$ bundle install #bundleでも可
③application.scssに下記を追加
@import 'font-awesome-sprockets';
@import 'font-awesome';
④実際に使えるかを確認する。
= icon("fas", "book")
fontawesome上では<i class="fas fa-book"></i>と記述されており、それを上記に当て込む事で利用可能である。
手順（font-awesome-rails）
一応こちらも記述する。
①下記gemをGemfileに記述する。
gem "font-awesome-rails"
②bundle installを行う
$ bundle install #bundleでも可
③application.scssにて下記を追加する。
@import 'font-awesome-sprockets';
@import 'font-awesome';
ここまでは同じ。使い方が先程とは異なる。
= fa_icon 'book'
総評
これまではあまり深く考えてなかったが、qiitaの記事の中でもfont-awesome-sassを入れながらもfa_iconを使う記事があり、そこで少し詰まってしまった。
自分で検証しているので今回の内容に相違は恐らくないとは思うが、他にも書き方はあるのだと思う。
間違っていたらご指摘頂けたら喜んで土下座します。