Twitter Bootstrap Rails利用していれば、デフォルト(?)でFont Awesomeを利用できますが、
こちらのサイトのアイコンを利用したかったので、試行錯誤してみました。
http://www.tenbytwenty.com/sosa.php
##下準備
-
まずは、上記のサイトからファイルをダウンロード。
-
app/assets
にfonts
という名前のフォルダを作る。 -
fonts
フォルダにダウンロードしたファイルsosa.eot sosa.svg sosa.ttf sosa.woff
をすべて入れる。 -
app/assets/stylesheets
に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.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )
##Viewの書き方
<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
でも解消しませんでした)
$rake assets:precompile
以上です。他のフォントセットでも使えると思いますので、お試しいただければと思います。