Bootstrap3 - Glyphicons are not displayed in Chrome, only

Question

Strangely, none of Bootstrap3 glyphicons are displaying in Chrome v31(displays a small square). But, works fine in FF v26, Opera v18, Safari v5.1 and IE v10. Also, works fine in Android 4.x - Chrome and FF.

Tested with simple code: <span class="glyphicon glyphicon-adjust"></span>

Please help. Thanks much in advance!

Environment: Windows 8.0

Answer 1

Rather than fix your problem, I prefer to teach you how to fix your own problem.

1. Right click on the element and choose "Inspect Element". That will bring up a window showing you some useful information about the html and the CSS that's applied to it.
2. If it's a sprite image (as in Bootstrap 2), look at the CSS on the right hand side, looking for the top-most (un-crossed-out) background-image. See the url for the sprite image. If it's a glyphicon (as in Bootstrap 3), look for the font-family instead.
3. Go to the Network tab. You may need to refresh the page to get useful stuff there.
4. Look for where it loaded that sprite image or font (e.g. glyphicons-halflings-regular.woff). If it says it has a status of "304", that means it was loaded from the cache. In that case, clearing the cache and reloading the page might solve your problem.
5. If it wasn't a "304" status, you might have a problem where the web server isn't serving up the image (a "404" or similar status) or it's not coming up correctly for some reason.
6. If clearing the cache didn't solve the problem, click on the URL for the sprite image or font on the Network tab, and then click on the "Preview" tab. What you should be seeing is a block image that contains your icon and all the other icons, or the alphanumeric characters in that font. If this isn't what you're seeing, again there is probably something wrong with what your web server is serving up.
7. If the sprite image is correct, then there is probably something wrong with your CSS where you're accidentally overriding the background-position for the sprite. Again, go back to your Elements tab and look at the CSS that's generated.