Search code examples
ruby-on-railstwitter-bootstrapcompass-sassglyphicons

Rails, Compass, and Bootstrap: Glyphicons not showing, though font seems to be


Yes, this is an always recurring one, but I can't figure it out.

I'm using rails (4.2.), compass-rails (2.0.5) and bootstrap-sass (3.3.5), and my glyphicons aren't showing.

See http://base.sirius.uberspace.de/en, where's an icon next to "Number of users" which is displayed as little box, but it's the glyphicon-user icon.

As far as I can see, the font seems to be loaded properly in the application.css file:

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

And when I request any of those src: url(...) URLs, they respond correctly and I can download the font. So the font seems to be available, but it's not displayed correctly when a .glyphicon-xxx CSS class is used.

Any idea what's the problem? I'm happy to provide more details, but as the font seems to be available properly, I think the problem is somewhere on a level that can be debugged using the website, but I simply don't know how to do it.


Solution

  • I updated my gems to bootstrap-sass (3.3.6), compass-rails (3.0.0), and rails (4.2.5.1). This solved the problem.

    For anyone interested, this is still needed:

    $icon-font-path: '/assets/bootstrap/' // Otherwise the fonts are searched in the wrong place, see https://gist.github.com/iamatypeofwalrus/6467148