search
LoginSignup
16

More than 5 years have passed since last update.

posted at

updated at

Organization

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

ご注文は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 Assetsbowerにあるパッケージを利用しますので,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>

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

参考URL

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
16