Glyphicons rendering as empty box

css twitter-bootstrap glyphicons
John Dorean picture John Dorean · Sep 8, 2013 · Viewed 30k times · Source

I'm using the excellent Twitter bootstrap library with Glyphicons, however all the icons are rendering as empty squares, like so:

enter image description here

I've uploaded the Glyphicons fonts to my web root and changed the bootstrap.css file to point to their correct locations, which I've verified because they have 200 OK requests in Chrome's dev tools:

enter image description here

This is the markup I'm using:

<a href="http://www.mysite.com/download" class="btn btn-primary"><span class="glyphicon glyphicon-star"></span> Download to Computer</a>

Any ideas why the font may be rendering as empty boxes? Previous answers on StackOverflow all point to incorrect paths to the fonts, which isn't the case here as the paths are correct.

Answer

John Dorean picture John Dorean · Sep 16, 2013

Not really a solution, but I ended up just using the Bootstrap CDN: http://www.bootstrapcdn.com/

Related questions

Add Bootstrap Glyphicon to Input Box

How can I add a glyphicon to a text type input box? For example I want to have 'icon-user' in a username input, something like this:

Read More
How Do I Make Glyphicons Bigger? (Change Size?)

I would like to make the globe glyphicon bigger so that it covers up a large portion of the page (it's a vector image). It's not in a button or anything; it's just alone. Is there a way to do …

Read More
Bigger Glyphicons

How do I make bigger Glyphicons in twitter bootstrap 3.0 (not 2.3.x). This code will make my glyphicons big: <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-th-list"> </span> </button> How …

Read More