twitter-bootstrap-railsでglyphiconが読み込まれない場合の対処法（Rails4、Bootstrap3）

解決方法

1. フォントファイルの有無を確認

Halflingsと言うフォントファイルがtwitter-bootstrap-railsと一緒にインストールされているかをまず確認する。

$ cd [Rails.root]
$ find ./ -name "glyphicons-halflings*"
.//vendor/bundle/ruby/2.3.0/gems/twitter-bootstrap-rails-3.2.2/app/assets/fonts/glyphicons-halflings-regular.eot
.//vendor/bundle/ruby/2.3.0/gems/twitter-bootstrap-rails-3.2.2/app/assets/fonts/glyphicons-halflings-regular.svg
.//vendor/bundle/ruby/2.3.0/gems/twitter-bootstrap-rails-3.2.2/app/assets/fonts/glyphicons-halflings-regular.ttf
.//vendor/bundle/ruby/2.3.0/gems/twitter-bootstrap-rails-3.2.2/app/assets/fonts/glyphicons-halflings-regular.woff
.//vendor/bundle/ruby/2.3.0/gems/twitter-bootstrap-rails-3.2.2/app/assets/fonts/glyphicons-halflings-regular.woff2

これらのファイルが、
　ある場合　->　5. へ
　ない場合　->　2. へ

2. フォントファイルの取得

Bootstrapのファイル一式をダウンロードしてfontsフォルダの中身をvendor/assets/fontsに移動

$ cd
$ curl -O https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
$ unzip bootstrap-3.3.6-dist.zip
$ cp -a bootstrap-3.3.6-dist/fonts [Rails.root]/vendor/assets/

3. フォントファイルをasset pipelineの対象に設定

config/initializer/assets.rb

Rails.application.config.assets.paths << “#{Rails}/vendor/assets/fonts”

4. lessファイルに取得したフォントファイルへのpathを設定

app/assets/stylesheets/bootstrap_and_overrides.css.less

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/asstes/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');
}

ここまでやってrails sしてうまくロードされていれば、5.の対応は多分不要

5. glyphicon.lessをimport

bootstrap_and_override.css.lessの以下のコメントアウトを除去

app/assets/stylesheets/bootstrap_and_overrides.css.less

// @import "twitter/bootstrap/glyphicons.less";

　↓↓

app/assets/stylesheets/bootstrap_and_overrides.css.less

@import "twitter/bootstrap/glyphicons.less";

環境

$ sw_vers -productVersion 
10.11.4
$ ruby -v
ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-darwin15]
$ rails -v
Rails 4.2.5.1
$ bundle list | grep twitter-bootstrap-rails
  * twitter-bootstrap-rails (3.2.2)

問題

twitter-bootstrap-railsでglyphiconが表示されない問題が発生。

Bootstrap3から、Halflingsと言うフォントをglyphiconの表示に利用しているため、そのフォントファイルが必要となり、かつrailsでassetとしてロードされている必要がある。

以前同じ問題に直面した時は
http://blog.10rane.com/2015/02/18/introduced-bootstrap3-to-rails4/
このあたりの情報を参考にして解決したが今回は解決せず、
よくよく見たらgemと一緒にフォントファイルがすでに取得されていたため、5.の方法で解決した次第。

gemのバージョンによるのかフォントファイルがセットになっている場合となっていない場合があるので、解決方法が２つに分かれるっぽい。

余談
Herokuにアップした時にどうなるか不安。ひょっとしたら、

config/initializers/assets.rb

config.assets.precompile +=  %w( *.woff *.eot *.svg *.ttf )

を追加して

$ rake assets:precompile

をしないとダメかも。（少なくとも前回はそうだった）