Railsに手作業でアイコンフォントを導入する方法

Twitter Bootstrap Rails利用していれば、デフォルト（？）でFont Awesomeを利用できますが、
こちらのサイトのアイコンを利用したかったので、試行錯誤してみました。
http://www.tenbytwenty.com/sosa.php

下準備

1. まずは、上記のサイトからファイルをダウンロード。

2. app/assetsにfontsという名前のフォルダを作る。

3. fontsフォルダにダウンロードしたファイルsosa.eot sosa.svg sosa.ttf sosa.woffをすべて入れる。

4. app/assets/stylesheetsにsosa.css.scss.erbという名前のファイルを作る。以下のように入力。各種値はお好みで変更を。

sosa.css.scss.erb

@font-face {
    font-family: 'Sosa';
    src: url('<%= asset_path('sosa.eot') %>');
    src: url('<%= asset_path('sosa.eot') + '?#iefix' %>') format('embedded-opentype'),
         url('<%= asset_path('sosa.woff') %>') format('woff'),
         url('<%= asset_path('sosa.ttf') %>') format('truetype');
         url('<%= asset_path('sosa.svg') + '#SosaRegular' %>') format('svg')
    font-weight: normal;
    font-style: normal;
}
[data-icon]:after {
    display: block;
    content: attr(data-icon);
    font-family: Sosa;
    font-size: 1.8em;
    line-height: 1.4;
    padding-right: 0.2em;
    color: #069CDB;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
[data-icon].white:after {
    display: block;
    content: attr(data-icon);
    font-family: Sosa;
    font-size: 1.8em;
    line-height: 1.4;
    padding-right: 0.2em;
    color: #ffffff;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

Configへ追加

config/environments/developments.rb

  config.assets.paths << Rails.root.join("app", "assets", "fonts")
  config.assets.precompile += %w( .svg .eot .woff .ttf )

config/environments/production.rb

  config.assets.paths << Rails.root.join("app", "assets", "fonts")
  config.assets.precompile += %w( .svg .eot .woff .ttf )

Viewの書き方

app/views/users/index.html.erb

<span data-icon='0'></span> ...span要素のすぐ後にヘッドフォンがでます。
<span data-icon='0' class="white"></span> ...ヘッドフォンが白になります。

※それぞれのdata-iconのkeyはWebサイトに掲載されています。

HerokuへPushするときの注意点

私の環境では、config/applicaiton.rbにconfig.assets.initialize_on_precompile = false を追加しているので、事前にlocal環境でPrecompileしてからPushしたところ成功しました。
（PrecompileせずにPushしたところ、これまで問題なかったCSSまで読み込まれませんでした。また、heroku run rake assets:precompileでも解消しませんでした）

console

$rake assets:precompile

---

以上です。他のフォントセットでも使えると思いますので、お試しいただければと思います。