rails4でbootstrap3のglyphiconを使う方法メモ。
twitter-bootstrap-railsのセットアップ
まず、bootstrapをrailsから使う必要があるのですが、それにはtwitter-bootstrap-railsというgemを使うのが簡単です。
rails4へのbootstrap導入にはこの記事が参考になります。
Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法
ただ、twitter-bootstrap-railsは現時点でbootstrap2を使うようなので、bootstrap3のglyphiconを使いたい場合は少し手作業が必要になります。その方法を解説します。
ちなみに、もっとも単純にglyphiconをrails4から使う方法は、bootstrap3のJSとCSSをまるごとダウンロードしてきてrailsから読み込む方法です。ただ、gemを使って管理できるならそっちの方がいいので、この記事ではtwitter-bootstrap-railsを使う方法を解説しています。
bootstrap3のglyphiconセットアップ
bootstrap3のglyphiconはwebフォントを使って実現しています(bootstrap2まではは画像でした)。なので、まずはフォントをサーバーに設置する必要があります。
bootstrap3を公式サイトからまるごとダウンロードし、その中のfontsディレクトリを[rails root]/vendor/assets/fontsにアップロードしてください。
その後、config/application.rb内のclass Application < Rails::Applicationの中に下記の一行を追加してください。
config.assets.paths << "#{Rails}/vendor/assets/fonts"
ここまで終わったら、http://example.com/assets/[フォントファイル名]でフォントにアクセスできることを確認してみてください。
次に、bootstrap3のCSSから@font-faceに関係する下記の部分だけを抜き出し、フォントのパスを書き換えてください。下記のように書き換えれば大丈夫です。
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('/assets/glyphicons-halflings-regular.woff') format('woff'), url('/assets/glyphicons-halflings-regular.ttf') format('truetype'), url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
windows用に別途フォントを指定している場合は、下記のように書けばglyphiconとの衝突を防げます。
# bootstrapのCSSよりも前に読み込むこと
*:not(.glyphicon) {
font-family:"Hiragino Kaku Gothic Pro",Meiryo,"MS PGothic",sans-serif !important;
}
最後に、bootstrap3のCSSの中から、glyphiconクラスを指定している箇所を全てコピーし、別ファイルとしてrailsから読み込んでください。
bootstrap3のCSSを全部読み込んでもいいのですが、twitter-bootstrap-railsが自動で読み込むbootstrap2のCSSと衝突する可能性があるため、glyphicon関係の部分だけ別途読み込んだ方が無難だと思います。
rails4へのglyphicon導入方法は以上です。
参考リンク
Ruby on Rails 4.0正式リリースとBootstrapの正しい設定法
英語ですが、同じ内容についてもっと詳しく丁寧に解説していて分かりやすいです。
Twitter Bootstrap 3 in a Rails 4 Application
