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 tried with suggested solution and it did not work for me, here is a generic solution that helps you troubleshoot any problem related to this you might have.

Here is the resulting font face definition with bootstrap-sass:

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

Answer 2

You can also try this:

@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.woff2") %>') format('woff2'), 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');
}

You just need to convert your your_css.css file to your_css.css.erb

Answer 3

You can copy all the bootstrap font files to public/fonts and it will work. No need for imports or changes in the application.rb.

Answer 4

According to Bootstrap 3 Glyphicons are not working, there's a bug with the Bootstrap customizer that messes up the glyphicon fonts. I had the same issue, but I was able to fix it by downloading the entirety of bootstrap from http://getbootstrap.com/, and then copying the font files to the correct location.

Answer 5

In my case I used this <i class="icon-plus"></i>, which I took from oficcial site of Bootstrap and didn't see anything. But instead, it is neccessary to use this <i class="glyphicon glyphicon-plus"></i>

Answer 6

I think you might be having a problem with the asset pipeline

You want to change bootstrap.css to bootstrap.css.scss and then replace where it uses

@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.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

with font-path (look at section 2.3.2 - CSS and Sass)

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

Also in your config/environments/production.rb

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

In your config/application.rb

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Check out another SO post for a similar problem

Hope this helps