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
I had the same problem as you:
bootstrap.min.css
file.font
folder name to fonts
.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:
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.
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>
Rather than fix your problem, I prefer to teach you how to fix your own problem.
background-image
. See the url for the sprite image. If it's a glyphicon (as in Bootstrap 3), look for the font-family
instead.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 :)