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

Shunsuke Sawada

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

rails, glyphicons

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, rails

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" />
1
Shunsuke Sawada

おすすめの記事

CakePHP 2.x JSヘルパーでajax通信(ajax helperは使わない)
20
Rails4でQiita投稿ボタンをつくった
18
紙のデザイナーがウェブ開発できるようになるまでに必要なこと
451