Ruby on Rails Bootstrap Glyphicons not working

Question

I have added bootstrap to my site. Here is the structure I am using. (I cannot whatsoever remove the bootstrap.css file since it I modified it to my liking).

Answer 1

I was also struggling to make boostrap3 glyphicon work in rails 4. I solved it by adding

@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');
}`

to application.css.scss file and

config.assets.paths << "#{Rails}/vendor/assets/fonts"

to application.rb file.

Answer 2

Make sure you have set

# config/environments/production.rb
config.assets.compile = true

And add fonts to precompile list

# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)

Answer 3

In my index.html.slim file, I replaced span.glyphicon.glyphicon-calendar with span.fa.fa-calendar and it worked.

Answer 4

Provided that you have the glyphicons files in app/assets/fonts (if you don't, you can download them from the bootstrap-saas repo), create app/assets/stylesheets/fonts.scss and add the following:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  font-url('glyphicons-halflings-regular.woff') format('woff'),
  font-url('glyphicons-halflings-regular.ttf') format('truetype'),
  font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Answer 5

In Rails 4, with sass, Bootstrap 3.2.0, and the bootstrap-sass gem use:

@import "bootstrap";
@import "bootstrap/theme";