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

追記:
多分ディレクトリ構成考えた方がすっきり解決する。
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" />

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた