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

Answer 1

It looks like this is a bug in WebKit, which has been reported here: https://bugs.webkit.org/show_bug.cgi?id=76152

Also, the creator of GlyphIcons says he is aware of this issue and will try to use different unicode values in the next release to get around this bug: https://twitter.com/glyphicons/status/423426740128854016

Answer 2

When the font response header is "Content-Type:text/html; charset=UTF-8" the chrome v38+ will have problem to show the bootstrap glyphicons, it will resolve this if set response header as "Content-Type:application/font-woff"

Answer 3

If it helps, using bootstrap.css instead of bootstrap.min.css fixed this issue for me.

Answer 4

I had the same problem. The easiest solution is to directly import the CSS from the hiperlink, do not download it:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

The problem is that the CSS use other relative paths to other files. Therefore, you can do 2 things:
1. Download all the relative paths.
2. You can simply use the hyperlink (easier).

Answer 5

Its mostly bootstrap versioning issue and simply I added below URL.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>

Answer 6

Ensure that you have the fonts folder in your project besides the js, css and others.

If the fonts folder is in the project and the path in the bootstrap.min.css file is like this ../fonts/glyphicons ie the fonts folder not in the css folder, Then everything will work just fine. Thank you.