Rails に font-awesome-rails を入れて Awesome Font を使う

Font Awesome というアイコンフォントが便利そうなので、Rails に入れてみました。gem があったので gem でインストール。いつもどおり、Gemfile 書いて bundle install。

Font Awesome, the iconic font designed for Bootstrap

スポンサーリンク

font-awesome-rails の導入と設定

Gemfile

application.css に以下を設定。

app/assets/stylesheets/application.css

Sass で利用する場合は、カスタマイズ用の scss ファイルで import します。

app/assets/stylesheets/custom.css.scss

HTML ビューでの書き方

以下は、Bootstrap のボタンのクラスと組わせて、Font Awesome の Twitter, Facebook のアイコンフォントを使う例。アイコンフォントは、i class タグで指定します。

スクリーンショット 2014-04-11 16.32.26

こんな感じで、Font Awesome のアイコンフォントと Bootstrap のボタンを組み合わせると、OAuth 認証用のボタンを簡単綺麗に設置できます。

ちなみに Awesome の発音は「オォスム」という感じです、長らくアウェサムだと思っていたのですけどね。英語でドラマや映画見るとアメリカ人やたら言ってます。日本語で言ったら「やべー」(超すげーの意味での)な感じのニュアンス。

スポンサーリンク
パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!