Font Awesome を Ruby on Rails に追加する方法
みんな大好き「Font Awesome」を、Ruby on Rails のプロジェクトに追加する方法。
簡単な方法
こちらのページでも紹介されているが、CDN を利用するのがもっとも手間が少ない。下記のコードを HTML へ埋め込むだけ。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
一般的な方法（？）
CDN を利用せずに、プロジェクトの中に Font Awesome を持っておきたい場合、それを実現する gem がある。
https://github.com/FortAwesome/font-awesome-sass
Gem を使わずに、自分で Font Awesome をインストールする（Asset Pipeline を利用）（2014-11-27追記：この方法は非推奨）
追記 2014-11-27 ===
今日（2014-11-27）時点で、Rails 4.0.12 で下記の方法を試してみました。
Rails 4 系では、ちょっとうまくいかないです。
現時点では、http://fortawesome.github.io/Font-Awesome/get-started/ で紹介されている、
gem を使う方法が最もオススメです。
追記ここまで ===
Font Awesome のファイルを DL する。DL したファイルを展開すると、次のような構成のファイルが手に入る。
これを自分の Rails プロジェクトへ移植する。（以降、自分のRailsプロジェクトを、単に プロジェクト という）
asset ファイルの置き場所は、一般的に「app/assets」「lib/assets」「vender/assets」以下のどれかであるが、今回は「vendor/assets」に置くことにする。
- 「font-awesome-4.0.3/fonts/」を、プロジェクトの「vendor/assets/fonts/」に移動。
- 「font-awesome-4.0.3/sass/」を、プロジェクトの「vendor/assets/stylesheets/fontawesome/」に移動
※ 今後、もし font-awesome をバージョンアップしたいときは、同様の手順で上書きすればよい。
Font Awesome の Get Started ページ の「PRO: Custom LESS or SASS」に注意書きがある通り、「vendor/assets/stylesheets/fontawesome/_variables.scss」を一部、書き換える必要がある。
以下の場所を、
@fa-font-path: "../font";
次のように書き換える。
$fa-font-path: font-path("") !default;font-path というイディオムは、Rails 3.1 以降から使えるようになっているらしい。
詳しくは、「sass - Using fonts with Rails asset pipeline - Stack Overflow」に詳しいので、是非目を通していただきたい。
問題
わたしは「font-path("") 」と書いているが、これには少し問題がある。
Sass コンパイルの結果「font-awesome.css」を見てみると、「/assets//fontawesome-webfont.eot?v=4.0.3」のように、スラッシュが重複してしまう。これは、どうしようかと思ったが、ブラウザは余計なスラッシュを無視して読み込みを行うという説明を見つけたので、これについては、とりあえずこのままにしておくことにした。
CSS の require に、Font Awesome を追加する
Font Awesome のファイルを vendor/ ディレクトリに追加したら、Asset pipeline にコンパイルされる css ファイルに、次のような記述を加えること。
application.css があるとしたら、次のように追記する
/* * Vendor Library (vendor/assets) *= require fontawesome/font-awesome */
これで、「vendor/assets/stylesheets/fontawesome/font-awesome.scss」が Asset pipeline の対象ファイルとなる。
以上。
