アイコンフォント"Font Awesome"を使う

bootstrap-sassでbootstrapのGlyphiconsを使おうと、いろいろ試行錯誤してみましたが、うまくいかなかったので諦めました。

変わりに、RubyGemsでアイコンフォントが提供されていると知ったので、こちらを試してみることにしました。今回利用したのは、"Font Awesome"です。見切り発車なので、どんなアイコンがあるのかも調べずに着手です（笑）

■ ブランチの作成

今回はアイコンフォントを実装するので、"iconfont"というブランチを作成します。

~/workspace/xapp9(master)$ git checkout -b "iconfont"
~/workspace/xapp9(iconfont)$

■ インストール

Font Awesomeのgithubのreadmeを参考にインストールします。ちなみに、RubyGemsによると最新バージョンは4.2とのことなので、gemfileは以下の通りに設定しました。

gemfile

gem 'font-awesome-rails', '~> 4.2'

gemfileを保存したらインストールします。

~/workspace/xapp9(iconfont)$ bundle install
Fetching gem metadata from https://rubygems.org/........
Installing font-awesome-rails 4.2.0.0

■ セットアップ

インストールが完了したらセットアップをしていきます。こちらもreadmeの通りに設定して行きます。まずはapplication.cssに"require font-awesome"を追加します。なお、scssを使っていると追加で設定が必要です。

app/assets/stylesheets/application.css

...
*= require bootstrap
*= require font-awesome
*= require_tree .
*= require_self
*/

■ 使ってみる

実際にビューに"Font Awesome"を挿入してみます。どんなアイコンがあるのかは、公式サイトで確認できます。クラスに"fa"とアイコン毎のクラスを指定すれば、アイコンフォントが表示されます。

app/views/shared/_nabvar.html.erb

<div class="header">
<a class="navbar-brand" href="#">XAPP9</a>
<a class="fa fa-bars fa-2x" href="#"></a>
</div>

■ 最後に

いつも通り、各種サービスにアップロードして終了です。

~/workspace/xapp9(iconfont*)$ git add .
~/workspace/xapp9(iconfont)$ git commit -m"Setup Font Awesome"
~/workspace/xapp9(iconfont)$ git checkout master
~/workspace/xapp8(master)$ git merge iconfont 
~/workspace/xapp8(master)$ git push
~/workspace/xapp8(master)$ git push heroku