Ruby on RailsでFont Awesomeをつかう

Font Awesomeを使うためのgemにはbokmann/font-awesome-railsなどが存在しますが，これはFont Awesome公式が出しているものではないためバージョンアップに追従できない可能性があります（このgemに関しては今のところ着いてきてるみたいですが…）．

そこで，僕は『Use Bootstrap-Sass 3.x and Font Awesome (bower-rails vs. rails-assets)』にあるようにRails Assets信者ですので，今回はこちらを利用します．
Rails Assetsはbowerにあるパッケージを利用しますので，Font Awesomeも公式が提供しているものを利用できるためです．

Gemfile

source 'https://rails-assets.org'

gem 'rails-assets-fontawesome'

あとは，application.css.scss（もしくはapplication.css）にrequireディレクティブを追加するだけで利用可能になります．

app/assets/stylesheets/application.css.scss

/*
 *= require_tree .
 *= require fontawesome
 *= require_self
 */

べんりなHelperをつくる

上記だけで<i class="fa fa-trash-o"></i>などのアイコンが利用できますが，このままだとlink_toを始めとするViewHelperで利用するにはめんどくさすぎることになります．
怠惰プログラマな自分的には面倒なのは嫌なので，楽にFont Awesomeを利用するためのヘルパを作りたいと思います．
（bokmann/font-awesome-railsにも同じような便利ヘルパが存在しますが…）

べんりへるぱ

def fa_icon(names, options = {})
  names = (names.is_a?(Array) ? names : names.split(/\s+/)).map { |n| "fa-#{n}" }
  classes = %W(fa #{names.join(' ')} #{options.delete(:class)})
  icon = content_tag(:i, nil, options.merge(class: classes))
  (block_given? ? yield(icon) : icon).html_safe
end

へるぱのつかいかた

fa_icon 'twitter'
# => <i class="fa fa-twitter"></i>

fa_icon('download') { |i| "#{i} Download" }
# => <i class="fa fa-download"></i> Download

fa_icon('caret-down') { |i| "dropdown #{i}" }
# => dropdown <i class="fa fa-caret-down"></i>

fa_icon 'quote-left 2x border', class: 'pull-left'
# => <i class="fa fa-quote-left fa-2x fa-border pull-left"></i>

これでいい感じに適当に使えますね．

初めてRailsでFontAwesomeした日の事憶えてる? link_toでfa-trash-oしようとしたわよね

Ruby on RailsでFont Awesomeをつかう

べんりなHelperをつくる

参考URL