RailsアプリにFont Awesomeを導入する

Font Awesomeという、WebページのアクセントとなるアイコンをWebフォントとcssで提供してくれる素晴らしいオープンソースがあります。

これをRailsアプリケーションに導入する手順について纏めます。

font-awesome-railsを導入する

RailsアプリにFont Awesomeを導入するには、font-awesome-railsを使うと便利です。
font-awesome-railsは、Font Awesomeをラップし、Railsのビューヘルパを提供するライブラリで、MITライセンスのオープンソースとして公開されています。

導入するには、Gemfileにfont-awesome-railsを追加し、bundle installします。

gem 'font-awesome-rails'

cssにFontAwesomeを引き込む

次に、app/assets/stylesheets/application.cssにfont-awesomeを引き込みます。

/*
 *= require font-awesome
 */

scssを使用している場合は、app/assets/stylesheets/application.scssにfont-awesomeをimportします。

import "font-awesome";

Viewでアイコンを表示する

Font Awesomeをノーマルなhtmlとcssで使用する場合は、iタグを使用して、cssクラスにfaクラスとアイコンの種別を示すcssクラスを指定します。

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

font-awesome-railsは、これを簡単にビューに適用するためのヘルパを提供してくれています。
したがって、上記のHTMLは、Railsのテンプレート上では、

<%= fa_icon("home") %>

と書くことができます。

アイコンサイズ

Font Awesomeは、６種類のサイズを提供していて、いずれもcssクラスを指定することでサイズを指定することができます。

<i class="fa fa-home"></i>
<i class="fa fa-home fa-lg"></i>
<i class="fa fa-home fa-2x"></i>
<i class="fa fa-home fa-3x"></i>
<i class="fa fa-home fa-4x"></i>
<i class="fa fa-home fa-5x"></i>

これをfont-awesome-railsのヘルパで書くには、fa_iconメソッドにサイズを示す文字列を追加して指定することで実現できます。

<%= fa_icon("home") %>
<%= fa_icon("home lg") %>
<%= fa_icon("home 2x") %>
<%= fa_icon("home 3x") %>
<%= fa_icon("home 4x") %>
<%= fa_icon("home 5x") %>

アイコン+テキスト

アイコンと並べてテキストを表示するには、fa_iconメソッドの:textオプションを指定します。

<%= fa_icon("home", text: "Home") %>
<%= fa_icon("home", text: "Home", right: true) %>

Stacked Icons

Font Awesomeは、いくつかのアイコンを重ねて表示することができます。
具体的な例は、Font Awesome Examplesで確認することができます。
font-awesome-railsは、これを実現するためのfa_stacked_iconヘルパを提供しています。
例えば、白抜きの四角いアイコンとTwitterアイコンを重ねて表示するには、

<%= fa_stacked_icon("twitter", base: "square-o") %>

と書くことができます。

以上、RailsアプリにFont Awesomeを導入する手順について書きました。
font-awesome-railsを使用することで、簡単に導入できますね。