Geek Answers Handbook

Bootstrap3 - Glyphicon does not appear in Chrome, only

Strange, none of the Bootstrap3 glyphics appear in Chrome v31 (displays a small square). But, it works fine in FF v26, Opera v18, Safari v5.1 and IE v10. It also works great in Android 4.x - Chrome and FF.

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

Please, help. Many thanks!

Environment: Windows 8.0

+7
browser google-chrome twitter-bootstrap-3 glyphicons
source share
10 answers

Instead of fixing your problem, I prefer to teach you how to fix your own problem.

  • Right-click on an item and select Inspect Item. This will open a window where you will find useful information about html and CSS that apply to it.
  • If this is a sprite image (as in Bootstrap 2), look at the CSS on the right side, look for the topmost (un-cross-out-out) background-image . See sprite url. If it is a glyphicon (as in Bootstrap 3), find font-family .
  • Go to the Network tab. You may need to refresh the page to get useful information.
  • See where he uploaded this image or sprite font (e.g. glyphicons-halflings-regular.woff). If he says that he has the status of "304", then it was loaded from the cache. In this case, clearing the cache and reloading the page may solve your problem.
  • If this is not the “304” status, a problem may arise when the web server is not serving the image (“404” or similar status), or for some reason it does not fit correctly.
  • If clearing the cache did not solve the problem, click the URL for the sprite or font on the Network tab, and then click on the Preview tab. What you should see is a block image containing an icon and all other icons, or alphanumeric characters in this font. If this is not what you see, again, probably something is wrong with what your web server is serving.
  • If the sprite image is correct, there might be something wrong with your CSS where you accidentally override the background position for the sprite. Again, go back to the Elements tab and look at the generated CSS.
+27
source share

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

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

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

+9
source share

This seems to be a bug in WebKit being reported here: https://bugs.webkit.org/show_bug.cgi?id=76152

In addition, the creator of GlyphIcons says that he knows about this problem and will try to use different unicode values ​​in the next version to get around this error: https://twitter.com/glyphicons/status/423426740128854016

+1
source share

Note to readers: Be sure to read the comment by @ user2261073 and @Jeff answer regarding a configuration error. This is probably the cause of your problem.

Font file loaded incorrectly. Check if the files are in the 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 Daniel pointed out, this could be a mimetype problem. Chrome dev tools display downloaded fonts on a network tab:

+1
source share

My .htaccess in / wp -content caused an error due to file type restriction. After I added woff2 to the list of allowed file types, everything works fine 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>
+1
source share

I had the same problem as you:

  • Go to the CSS folder.
  • Open the bootstrap.min.css file.
  • Search for glyphicon text.
  • You can find out the url address.
  • You must change the name of the font folder to fonts .
  • Go and enjoy your life. :)
+1
source share

When the response header for the font is "Content-Type: text / html; charset = UTF-8" , chrome v38 + will have a problem with the display of bootstrap glyphs, it will resolve this if the specified response header is like "Content-Type: application / font -woff "

0
source share

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

enjoy :)

0
source share

I found that when checking CSS bootstrap.min.css that spaces were added to the directory location for the “fonts”, it meant that it caused files that weren’t because the file names didn’t have these spaces in them. For example, it was indicated all the way through

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

when it was supposed to be

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

As soon as I removed the spaces, reloaded the CSS, cleared the browser cache and reloaded (F5 button), finally glyphics appeared. Before removing the extra spaces, the only other option that worked for me was what Gines Hidalgo gave, who suggested loading CSS via a hyperlink. But with the discovery that removing extra spaces eliminates the problem, this option is no longer needed.

0
source share

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

-one
source share

More articles:


All Articles