Glyphicons become corrupted if Bootstrap CSS file is hosted locally

Question

I'm using Twitter Bootstrap 3.0 on a project. There's a fixed requirement of not hosting any files externally. But when I host the .css and .js files locally, the Glyphicons become corrupted.

Here's what it should look like:

Using bootstrap.min.css from the original CDN issues no errors, but placing the same file on the local server will affect the icons rendering, like in the image below:

It doesn't seem to matter if I download and save the original file using wget, DownThemAll, or open it on Firefox and use the "Save As" feature. It doesn't matter if the <link> href is href="/css/bootstrap.min.css, href="http://www.domain.com/css/bootstrap.min.css or href="http://www.domain.com/bootstrap.min.css.

My dev machine is running Linux. I can only use it to browse the site, both on my dev machine and in production. I'm using Firefox 26, but changing the value of security.fileuri.strict_origin_policy has no effect. As far as I can tell, the only difference that causes the render error is the CSS file location.

The issue happens both on my dev machine and in the live server.

Answer 1

Glyphicons are webfonts loaded from addresses hardcoded in the CDN version of Twitter Bootstrap. The original code is:

@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')}

You have to either edit the CSS or place the font files on the /fonts/ folder. You can obtain both the fonts and the CSS files at the "customize" page.