RailsでGemを使わずにTwitterBootstrapを入れたらアイコンが出なかった

追記：
多分ディレクトリ構成考えた方がすっきり解決する。
RailsでTwitterBootstrapを手動で入れる時（LESS編） | Workabroad.jp

Bootstrap

バージョン3になったTwitter Bootstrap。
Railsで使う時、Gemを使えば良い時もありますが、
結構カスタマイズしたい時には手作業で入れる方がいいかもね。

RailsのデフォルトはSassだけど、BootstrapはLessなので下記を入れる。
metaskills/less-rails

あと、rails g controller とかしたときに.scssじゃなくて.lessファイルが作られるように、config/application.rbに下記を追記。

1
config.app_generators.stylesheet_engine :less

Bootstrap自体はapp/assets/にjsとcssを分けて普通に入れてしまえばいいんだけど、
やってみたらアイコンというか、Glyphiconsがでなかった。
こんな感じで、□□。

bootstrapの.lessじゃなくて.css使う場合はこれじゃだめだから、
@font-faceの読み込み部分だけ取り出して、
glyphicons.css.erbとしてstylesheetsディレクトリに保存しました。

URLにasset_pathを使っているのがポイント。

@font-face {

    font-family: 'Glyphicons Halflings';

    src: url('<%= asset_path 'glyphicons-halflings-regular.eot' %>');

    src: url('<%= asset_path 'glyphicons-halflings-regular.eot' + '?#iefix' %>') format('embedded-opentype'),

         url('<%= asset_path 'glyphicons-halflings-regular.woff' %>') format('woff')

         url('<%= asset_path 'glyphicons-halflings-regular.ttf' %>') format('truetype'),

         url('<%= asset_path 'glyphicons-halflings-regular.svg' + '#glyphicons-halflingsregular' %>') format('svg');

    font-weight: normal;

    font-style: normal;

}

1
2
3
イェーイ
<img src="http://image.workabroad.jp/wp-content/uploads/2013/09/Screen-Shot-2013-09-20-at-3.36.51-PM.png" alt="rails bootstrap icon" width="114" height="72" class="alignnone size-full wp-image-1103" />