Why are Bootstrap Glyphicons only appearing when debugging in Google Chrome?

Question

I'm using Twitter Bootstrap 2.3.2 and while I was developing the app in MVC4, I had no issue with the Glyphicons, until I tested it in Firefox and IE.

In firefox, I get the following Image instead of the icons:

I checked the reference to the glyphicons image files and they are all right.

While debugging in Chrome, I can see the icons perfectly (I cleared my cache to see if that was the issue, but the icons persisted).

Answer 1

You should check that your glyphicons relative url is correctly formatted:

If your glyphicons image file is in ../icon/glyphicons.png

url('../icon/glyphicons.png')

But be careful, if the file is actually in ../img/icon/glyphicons.png the url should be:

url('../img/icon/glyphicons.png')