ご注文はFont Awesomeですか? 第3羽です.
タイトルが苦しい? やかましいわ
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も公式が提供しているものを利用できるためです.
source 'https://rails-assets.org'
gem 'rails-assets-fontawesome'
あとは,application.css.scss
(もしくはapplication.css
)にrequire
ディレクティブを追加するだけで利用可能になります.
/*
*= 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>
これでいい感じに適当に使えますね.