9

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

lupchiazoem
  • 8,026
  • 6
  • 36
  • 42
  • Right click on the square and choose "Inspect Element". It should tell you lots of interesting things about the CSS that was applied, and whether or not the icons were loaded. – Paul Tomblin Jan 03 '14 at 17:27
  • @PaulTomblin I did that but, didn't find anything noticeable except that Chrome has inserted `:before` between `span`. Please let me know as to how do I check if icons were loaded or not. I'm not into UI, finding it difficult... – lupchiazoem Jan 03 '14 at 17:37
  • 1
    HAve a look for the "background-image" CSS that's not crossed out, and look at the url. Then go to the Network tab (you may need to reload the page) and see where that sprite image is loaded. Chances are it's going to have a status of 304 meaning it was loaded from cache. In that case, try clearing your cache. If it's a 404 status or something else, you've got other problems. – Paul Tomblin Jan 03 '14 at 17:50
  • @PaulTomblin Time for me to go to bed :) It was simple cache problem. Anyhow, I learned about debugging. Thanks again! Please post your last comment as answer, I will accept. – lupchiazoem Jan 03 '14 at 18:02
  • I'm in a fix after seeing down votes for my chosen correct answer, Wellington Zanelli's comment(indeed, Glyphicons are font based) and answer by @Chris Barr, as clearing the cache did solve my problem(as suggested by Paul Tomblin in above comment). – lupchiazoem Jan 22 '14 at 19:23
  • Don't worry about it. My advice still stands. The advice is *slightly* different for glyphicons instead of sprites, but anybody with half a brain should be able to figure out the difference. – Paul Tomblin Jan 22 '14 at 19:58
  • The accepted answer is not a solution, or a least not for me. I'm using Chrome V37 on a Mac and working on a site using Bootstrap 3 that is linked to MaxCDN. I get boxes in place of glyphicon font icons intermittently. In my case, the fonts render as soon as I mouseover them. Looking at developer tools all looks okay as far as I can tell. Asking users to clear their cache is not an option either. – Adam Youngers Sep 04 '14 at 18:51

12 Answers12

33

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.
Paul Tomblin
  • 179,021
  • 58
  • 319
  • 408
  • 8
    This answer doesn't apply to Bootstrap 3. In Bootstrap 3 the Glyphicons are font-based, not sprites like you said. – Wellington Zanelli Jan 09 '14 at 18:38
  • Ok, for those of you who are unable to figure out how to take the advice for sprites and make the two extremely minor changes to make the advice work for glyphicons, I've spelled it out for you. – Paul Tomblin Jan 22 '14 at 20:04
  • Some glyphicons just do not work with chrome(as of v32.0). Try testing a few different glyphicons to see if it is a chrome issue or a server/code issue. – kravits88 Feb 11 '14 at 23:19
  • As Chris notes, there was a bug in Bootstrap that was tolerated by many browsers (for a while), but broke when Chrome was updated. If you use the latest version of glyphicons, for many users the problem will be fixed. Alternatively, a user could simply use a CDN and thereby get around the issues you are talking about (cf. "Get Bootstrap", CDN section: http://getbootstrap.com/getting-started/#download) – abhillman Oct 09 '14 at 21:08
  • Pretty good answer, even without the edits it behaved as explained. – Oakcool Nov 25 '14 at 18:49
  • Did not solve my problem, but great answer to do some trace. good explanation. – ethem Mar 17 '15 at 10:28
11

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).

Ginés Hidalgo
  • 717
  • 9
  • 20
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

Chris Barr
  • 29,851
  • 23
  • 95
  • 135
1

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:

Community
  • 1
  • 1
Shiv Singh
  • 6,939
  • 3
  • 40
  • 50
1

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>
Browsergirl
  • 11
  • 1
1

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. :)
helencrump
  • 1,351
  • 1
  • 18
  • 27
mohsen Irani
  • 11
  • 1
0

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"

Jack
  • 357
  • 3
  • 4
0

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 :)

Laxmikant
  • 1
0

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.

Eric Patterson
  • 1
0

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"/>
mazhar 124
  • 123
  • 1
  • 3
  • 16
0

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.

Adam
  • 2,726
  • 1
  • 9
  • 22
Bukenya
  • 1
  • 2
-1

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

coda
  • 622
  • 1
  • 7
  • 14
  • 1
    Why don't you use font awesome http://fortawesome.github.io/Font-Awesome/ made for bootstrap –  May 27 '14 at 12:27