https://shinsuke789.hatenablog.jp/entry/2015/10/27/123000

RailsにBootstrapを導入するとGlyphicon（アイコン）が表示されません。

ネットで調べてみるとGemをインストールしたり、application.rbに設定を追加したりしているのが多かったです。
個人的には単純に追加の処理は行いたくなかったのでいろいろ試してみました。

結果的に、CSSで使用してるフォントのパスを変更するだけで表示されるようになりました。

環境

Rails	4.2.4
Bootstrap	3.3.5

変更箇所

bootstrap.cssを「app/assets/stylesheets/bootstrap.css」に設置した場合、このCSS内にある「@font-face」の定義のurlにある「../fonts/」を削除するだけです。（263行目あたり）

パス変更前

パス変更前のアイコンは次のように表示されます。
f:id:shinsuke789:20151027062934p:plain

app/assets/stylesheets/bootstrap.css

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url(../fonts/'glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

パス変更後

パス変更後は正常にアイコンが表示されます。
f:id:shinsuke789:20151027063304p:plain

app/assets/stylesheets/bootstrap.css

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('glyphicons-halflings-regular.eot');
  src: url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('glyphicons-halflings-regular.woff2') format('woff2'), url('glyphicons-halflings-regular.woff') format('woff'), url('glyphicons-halflings-regular.ttf') format('truetype'), url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

参考

Ruby on Rails Bootstrap Glyphicons not working - Stack Overflow
Twitter Bootstrap 3 in a Rails 4 Application
Rails 4 で assets に font を追加する方法 - Qiita

作者: 山田祥寛
出版社/メーカー: 技術評論社
発売日: 2014/04/11
メディア: 大型本
この商品を含むブログ (5件) を見る