RailsでFont Awesomeを使う方法

Ruby on Rails gem

何気なく使ってたFont Awesome。
ゼロから導入しようと思った時にちょっと戸惑ったので、導入方法をメモ。

GEMの追加

まずはFont Awesomeを使うためのgemを追加。
config/routes.rb

gem 'font-awesome-rails'

gemを追加したのでアップデート

$ bundle install

これでgemの追加は完了

scssの読み込み

このままだとscssを読み込んでくれないのでapplication.scssに次を追加。

@import "font-awesome";

これでhamlにfont-awesome.scssが読み込まれるようになる。

hamlに記入

それでは実際にviewファイルに追記していく。
font-awesomeのサイトを見るとこんな感じで書いてある。

<i class="fas fa-home"></i>

今回はお家のマークを使ってみた。
ただ、このままだとhamlファイルには書けない。
せっかくgemを導入しているので関数を使った書き方をしてみる。

= fa_icon 'home'

font-awesomeに書いてあった"fas fa-home"の"home"部分だけを記載すればOK。

使えるのは無印のみ

font-awesomeのサイトには様々なアイコンがあるけれど、課金しないで使えるのはPROがついていない無印のアイコンのみ。
そうすると使えるアイコンはかなり減ってしまうが、ここで裏技。
例えばハート形のアイコン

= fa_icon 'heart'

の最後に"-o"をつけてみる。

= fa_icon 'heart-o'

こうすると、塗りつぶしだったハートが白抜きハートに早変わり。
ハート以外にもコメント、ベルマークとかで使えるので覚えておくと便利。