Hamlでfont-awesomeにリンクを貼る方法

railsにてhamlを用いてマークアップを進めていた際に、font-awesomeを使用するのに少しつまづいたので書いておきます。

font-awesomeとは

Web上でよく使われるアイコンを、画像ではなくテキストとして表示できるようにしてくれる機能です。
railsではgemとしてインストールすることができます。

hamlとは

HTML/XHTMLを生成するためのマークアップ言語で、非常に簡易的に記述することができます。

手順を確認

gemのインストール

Gemfileに以下の記述をします。

Gemfile.rb

gem "font-awesome-rails"

ターミナル上でbundle installします。

hamlのインストール

こちらもGemfileに記述します。

Gemfile.rb

gem 'haml-rails'
gem 'erb2haml'

ターミナル上でbundle installします。

erbファイルをhamlに変換

gem 'erb2haml'のジェムがしっかりインストールされていれば、rake -Tコマンドで以下のような表示がされます。

terminal

rake haml:convert_erbs                  # Perform bulk conversion of all html.erb files to Haml in views folder
rake haml:erb2haml                      # Convert html.erb to html.haml each file in app/views
rake haml:replace_erbs                  # Perform bulk conversion of all html.erb files to Haml in views folder, then remove the converted html.erb files

そこで、rake haml:replace_erbsと入力します。
すると、現在のディレクトリ以下のerbファイルをすべてhamlファイルに変換してくれます。

hamlファイル内でfont-awesomeを使って見る

http://fontawesome.io/icons/
上記URLから使用したいアイコンをクリックします。

上の画像にあるような<i...></i>のタグをコピーします。
通常のHTMLファイルでは、このiタグを丸ごとコピペするだけで使用することができます。
hamlで記述する際には、以下のようになります。

sample.html.haml

%i.fa.fa-cog

link_to内で使ってみる

hamlにおいて、rubyの記述をする際には、以下の二通りの記述法があります。
ビューで表示しない場合は'-'を使用する

sample.html.haml

- if
- @posts.each

表示する場合は'='を使用する

sample.html.haml

= post.title

link_toには'='を適用します。

sample.html.haml

= link_to 表示する文言, URLパス, メソッド, クラス

このように書きますが、以下のように書いてもエラーが起きてしまいます。

index.html.haml

= link_to edit_user_registration_path .fa.fa-cog
= link_to edit_user_registration_path i.fa.fa-cog

コンテントタグを使用する方法もあるみたいですが、以下のように書くとコードもすっきりし、正常に表示もされます。

index.html.haml

= link_to edit_user_registration_path do
  %i.fa.fa-cog

ネストさせて書かずに結構な時間はまっていたので、参考までに。

参考資料

link_toについて
http://udemy.benesse.co.jp/development/link-to.html
font awesomeについて
http://univ.peraichi.com/39