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.
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.