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.

Answer 2

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 3

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 4

Note to readers: be sure to read @user2261073's comment and @Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.

The font file isn't being loaded correctly. Check if the files are in their expected location.

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

As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:

Answer 5

My .htaccess in /wp-content caused the error due to a file type restriction. After I added woff2 to the list of allowed file types everything works nicely again.

# Protect /Wp-Content/
Order deny,allow
    Deny from all
    <Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
    Allow from all
    </Files>

Answer 6

I had the same problem as you:

1. Go to your CSS folder.
2. Open the bootstrap.min.css file.
3. Search for glyphicon text in that.
4. You can find out its url address.
5. You should change the font folder name to fonts.
6. Go and enjoy your life. :)

Answer 7

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 8

You need to download bootstrap fonts folder, and in your bootstrap.min.css you can find path like ../fonts for glyphicon, you need to change this path to "fonts/" remove ../ if your fonts folder is within same bootstarp.min.css .

enjoy :)

Answer 9

I discovered that upon inspecting the CSS of bootstrap.min.css that the directory location for "fonts" had added spaces which meant that it was calling for files that don't exist because the file names don't have those spaces in them. For example, it was listed all the way through every one as

.. / fonts / glyphicons - halflings - regular.eot

when it should have been

.. /fonts/glyphicons-halflings-regular.eot

Once I deleted the spaces, re-uploaded the CSS, cleared the browser cache, and reloaded (F5 button) the glyphicons finally showed up. Prior to removing the extra spaces the only other option that worked for me was that given by Gines Hidalgo who suggested downloading the CSS through a hyperlink. But with the discovery that removing the extra spaces fixes the problem that option is no longer necessary.

Answer 10

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 11

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.

Answer 12

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