0

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.

Community
  • 1
  • 1
Prasad Surase
  • 6,486
  • 6
  • 39
  • 58

1 Answers1

1

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.

Matt Brictson
  • 10,904
  • 1
  • 38
  • 43
  • if we replace the ; with , as u specified, getting "Invalid CSS after " src": expected ";", was ": url(font-path..."" error. – Prasad Surase Apr 03 '15 at 05:00
  • I cloned your repo and made this change, and it fixed the problem. Pretty sure it works. :) Are you copying the `@font-face` code exactly from my answer? – Matt Brictson Apr 03 '15 at 05:01
  • Thanks for the answer. Was stuck for hours. – Prasad Surase Apr 03 '15 at 06:30
  • can u pls add comments as to to why the second and later 'src's are seperate from the first one. Why are they grouped seperately from the first? thanks. – Prasad Surase Apr 03 '15 at 06:33
  • 1
    I suspect this particular ordering of the `src` declarations is to ensure compatibility with various browsers. I based my answer on the Bootstrap source code, found here: https://github.com/twbs/bootstrap/blob/v3.3.4/less/glyphicons.less#L11 – Matt Brictson Apr 03 '15 at 16:47