Search code examples
ruby-on-rails-4twitter-bootstrap-3glyphicons

Glyphicons with bootstrap 3.3.4 not working in rails 4.2.1


I have rails 4.2.1 application which uses bootstrap 3.3.x and glyphicons. I cant use boostrap-sass or any other gems for integrating bootstrap with rails because the original bootstrap.css has been modified by the designer. I also have a custom.css file.

I have renamed all the css files(application, bootstrap and custom) to use scss format. Currently, the bootstrap css is working fine but the glyphicons are not being displayed. I have replaced the font-face code in the bootstrap.scss to

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

Previously(fontawesome + rails 4.0.1 not working), I did configure the scss files in rails to use different fonts and it did work. I tried the same approach in the current rails application but am not able to figure out as to why its failing. Here(https://github.com/prasadsurase/rails-fonts.git) is a sample rails application to check out the issue.

Thanks for any suggestions.


Solution

  • You have a mistake in your SCSS. The @font-face should be declared as follows:

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

    Note that there are exactly 2 src specifications. The first src has one url(), and the second src has multiple url() declarations separated by commas, not semicolons.