I downloaded bootstrap 3.0 and can't get the glyphicons to work. I get some kind of "E003" error. Any ideas why this is happening? I tried both locally and online and I still get the same problem.
-
1where are you getting the error? – Daniel A. White Aug 21 '13 at 23:02
-
1Anywhere I insert the icons... Here is the error I get. Only thing I did is to download bootstrap from the site customizer, and replaced the previous files (font files had different names though). Now they aren't working... Have also tried several browsers, firefox, chrome, ie, same thing... i.imgur.com/2f474kX.jpg – scooterlord Aug 21 '13 at 23:09
-
2I have just downloaded the latest release today and the glyphs do not show if I use the minimized CSS file. If I use the 'normal' bootstrap.css everything works fine. – Antonio Sesto Feb 16 '14 at 12:00
-
1As of June 23, 2015, include the latest release v3.3.5 maxcdn you have no errors – user4988789 Jun 23 '15 at 5:57
-
1I found that I was using the glyphicons on a white background and expecting them to show up. Using <i style="color:black" class="glyphicon glyphicon-new-window"></i> fixed it. – Vijay Vepakomma Oct 29 '15 at 16:20
I was having the same issue and couldn't find any information about it except in the hidden comments on this page. My font files were loading just fine according to Chrome, but the icons weren't displaying properly. I'm making this an answer so it will hopefully help others.
Something was wrong with the font files that I downloaded from Bootstrap 3's customizer tool. To get the correct fonts, go to the Bootstrap homepage and download the full .zip file. Extract the four font files from there to your fonts directory and everything should work.
-
You saved many hours of pain. I had already put in one hour of pain, but then I thought about looking here. – Christina Sep 7 '13 at 17:30
-
6swapping the fonts files for the ones included in bootstrap-3.0.0 of the getbootstrap.com home page works. thanks for the tip! – Michal Kopec Sep 18 '13 at 0:01
-
11
-
2I wanted to add my "me too" response and say that after wasting a couple of hours of effort, and almost rage quitting my career, I found this answer and now I have working glyphicons again. Thank you!! – dohpaz42 Oct 24 '15 at 18:22
-
2I can't wait to be part of all the people who succeeded but right now despite having tried almost every single solution and answer of the Stack, I'm still unable to see the icons. I even tried to start a completely new MVC 5 app and using Nuget to install bootstrap latest version 3.3.7 which install all the folders correctly and nothing shows a 404 in the browser debugger tool or anything telling me that the fonts aren't loaded and I can tell you that the code for the span is perfect so where is my problem. I honestly don't know. I tested all the browsers and none shows the icons – Marc Roussel Feb 11 '17 at 18:26
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:
-
5
-
4...although the files should be in place when I downloaded the bootstrap.zip file, I still double-checked and everythins is in place. How do I check the mimetypes registration (=?) – scooterlord Aug 21 '13 at 23:13
-
1@user2261073 the .eot file shouldn't load, unless you're using Internet Explorer. – user247702 Aug 21 '13 at 23:26
-
46Looks like I found the problem. The bootstrap customizer seems to be sending different sized fonts than the ones that are inside the whole bootstrap package that comes with the examples. I replaced the files and everything is working fine now. It's most likely a bug in bootstrap's customizer? Who knows. Can I report this somewhere so they can look into it? – scooterlord Aug 21 '13 at 23:43
-
2@user2261073 You can report it on the GitHub project. There already seems to be an active bug report: github.com/twbs/bootstrap/issues/10008 – user247702 Aug 21 '13 at 23:46
In my case I was getting a 404 for glyphicons-halflings-regular.woff, and non visible glyphicons on mobile browsers.
Looks like there is some confusion about the MIME type for woff, more than one MIME type being accepted by different browsers, but the W3C says:
application/font-woff
Edit: After testing the following MIME type for woff works on all browsers currently:
application/x-font-woff
Edit: Latest version of Bootstrap at this time (3.3.5) uses .woff2 fonts with the same initial result as .woff, the W3C still defining the spec but at the moment the MIME type seems to be:
application/font-woff2
-
17This pointed me in the good direction but it also gave me another warning in Chrome... The MIME type should be in fact:
application/x-font-woff
then Firefox and Chrome were finally both happy :) – ghiscoding Nov 4 '13 at 16:11 -
Thanks, that was the real problem for me. Everything was working OK locally but once published to Azure the .woff type was the only one giving problems. – Kevin Cloet Nov 11 '14 at 16:38
-If you followed the highest rated answer and it's still not working:
The Font
folder MUST be on the same level as your CSS folder. Fixing the path in bootstrap.css
will not work.
Bootstrap.css
has to navigate to the Fonts
folder exactly like this:
@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');
}
-
3I think 70% of Glyphicon not working in of this case, great answears, I often put Bootstrap css files in css/bootstrap. Just move them up to css and everything work – Andiana Jun 10 '15 at 23:22
-
1Well the path for me looks EXACTLY as prescribed by you but it still doesn't work for me. Neither does downloading the source package and replacing the font files. I must add that some glyphicons load while others don’t. Can you help? – Darth Coder Oct 7 '15 at 17:47
-
-
Also the
css
folder has to be a subfolder of the folder containing your HTML file. So at a minimum, you have to have 1) your HTML file, 2) a css file in a subfolder calledcss
, and 3) the font files in a subfolder calledfonts
. – Kivi Shapiro Jan 11 '18 at 21:02 -
This makes no difference when loading from CDN; only when loading locally. Adding a link to
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css
solved it for me. – James Wilkins Mar 18 '19 at 21:20
If the other solutions aren't working, you may want to try importing Glyphicons from an external source, rather than relying on Bootstrap to do everything for you. To do this:
You can either do this in HTML:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Or CSS:
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")
Credit to edsiofi from this thread: Bootstrap 3 Glyphicons CDN
In case someone else ended up here and using Bootstrap >= v4.0: glyphicon support is dropped
The relevant part from the release notes:
Dropped the Glyphicons icon font. If you need icons, some options are:
the upstream version of Glyphicons
Source: https://v4-alpha.getbootstrap.com/migration/#components
If you want to use glyphicons you need to download it separately.
I personally tried Font Awesome and it is quite good. Adding icons is similar to glypicon way:
<i class="fas fa-chess"></i>
I was looking through this old question of mine and since what was supposed to be the correct answer up until now, was given by me in the comments, I think I also deserve the credit for it.
The problem lied in the fact that the glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. The ones that are working as they should are the ones that can be downloaded from the following link:
http://getbootstrap.com/getting-started/#download
Anyone having problems with old bad customizer files should overwrite the fonts from the link above.
-
The Customizer problem was fixed a long time ago. It's no longer an issue in current Bootstrap. – cvrebert Oct 19 '14 at 20:49
-
1Nowadays, they're probably running into icon font location issues instead, even though the way the icon font paths work is documented... – cvrebert Oct 19 '14 at 22:46
-
there are certain things to check out for this issue. - Check this mime types in IIS for your site.. It must be there for one of the above issues... -
application/vnd.ms-fontobject
- .eot -application/x-font-woff
- .woff -application/x-font-ttf
- .ttf -image/svg+xml
- .svg – pedram Jul 30 '15 at 7:31 -
My glyphicons work in all browsers except IE. IE displays them on first load - hit F5 and then no longer displays. The DOM is correct, the css applied is correct. I cannot find a solution. Ideas? – Skychan Oct 6 '15 at 21:53
-
1I can check/uncheck the "content: "\e080"" CSS that sets the content to a particular character. When I do that, the span's size physically changes from something to nothing and back. So it really feels like IE bug - failing to draw the character. – Skychan Oct 6 '15 at 22:03
Azure Websites are missing woff MIME configuration. You must add following entry into web.config
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
</configuration>
As @Stijn described, the default location in Bootstrap.css
is incorrect when installing this package from Nuget
.
Change this section to look like this:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('Content/fonts/glyphicons-halflings-regular.eot');
src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
-
1If you're using LESS you can just override it in your less file and change the URL's to match relative paths from your gen'd CSS file or root them. – Chris Searles Oct 28 '13 at 15:11
-
This should no longer be an issue with the latest release of bootstrap. Update! – dball Feb 3 '14 at 23:02
You can add this line of code and done.
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
Thanks.
-
This is missing many of the newer icons added in later versions of v3. – James Wilkins Mar 18 '19 at 22:54
-
IIS will not server .woff
files by default, so in IIS you'll need to add a <mimeMap>
entry to your web.config
file;
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/x-woff" />
</staticContent>
</system.webServer>
</configuration>
-
This scales a lot better instead of having to remember to configure this for each IIS machine. Nice mention – Matty Bear Dec 10 '14 at 7:24
-
You should update your mimetype to be "application/font-woff" as per current standards: stackoverflow.com/a/5142316/2267817 – Always Learning Jan 13 '15 at 23:52
-
Do you have all below files in your fonts directory
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
-
This is the correct answer. A person can find the right folder to place these files, using Xenu's link sleuth: home.snafu.de/tilman/xenulink.html – Nav Oct 5 '14 at 6:03
-
2But, there are people who have all these files in the fonts folder but are still getting this error if mime type woff is not registered with IIS. – Stack0verflow Jun 10 '15 at 13:38
-
fonts directory is required ? I have only bootstrap.css and bootstrap.js – Kiquenet Feb 20 '18 at 9:19
I modified my less variables.less file I modified the variable
@icon-font-path: "fonts/";
the original was
@icon-font-path: "../fonts/";
It was causing a problem
-
2For bootstrap-sass 3.2.0.1 gem it seems to need
$icon-font-path: "/assets/bootstrap/"
. – Joshua Muheim Jul 29 '14 at 15:23 -
This is due to wrong coding in bootstrap.css and bootstrap.min.css. When you download Bootstrap 3.0 from the Customizer the following code is missing:
@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');
}
Since this is the main code for using Glyphicons, it won't work ofc...
Download the css-files from the full package and this code will be implemented.
This was the reason, why the icons didn't show up for me:
* {
arial, sans-serif !important;
}
After i have removed this part of my CSS
, everything worked like it should. The !important was the one causing trouble.
-
Thank you! After scratching my head for over 4 hours and trying numerous different things I remembered that I added a font on "span" with important. Removed it and everything is back to normal.. – Ali Haider May 21 '17 at 1:48
Another problem/solution may be having this Bootstrap 2.x code:
<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
and when migrating based on the guide (.icon-* ---> .glyphicon .glyphicon-*
):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>
you forget to add the icon class (containing the font reference):
<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
Below is what fixed it for me. I was getting "bad URI" error using in Firebug console. The icons were showing up as E### numbers. I had to add a .htaccess file in my 'fonts' directory.
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Possible duplicate of: Downloadable font on firefox: bad URI or cross-site access not allowed
This is very much a long shoot, but it was my case and since it is not here already.
If you are compiling Twitter Bootstrap from SASS using gulp-sass
or grunt-sass
ie. node-sass
. Make sure your node modules are up to date, especially if your are working on a rather old project.
It turns out that as of some time back the SASS directive @at-root
is used in the definition of the @font-face
in glyphicons, see https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scss.
The gotcha here is that node-sass
ie. libsass
do not support the @at-root
directive if it is too old. If this is the case you will get a @font-face
wrapped in a @at-root
which the browser have no idea what to do with. The result of this is that no font will be downloaded and you will likely see garbage instead of icons.
Note: below is likely a niche scenario, but I wanted to share it in case someone else might find it useful.
In a rails project, we are reusing quite a bit through a gem that is a Rails engine using bootstrap-sass
. All was well in the main project with the exception of the glyphicon font path resolution.
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
We found that $bootstrap-sass-asset-helper
was false
during the resolution when we expected it to be true, so the path was different.
We caused the $bootstrap-sass-asset-helper
to be initialized in the engine gem by doing:
// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";
e.g. this caused the path to resolve to:
/assets/bootstrap/glyphicons-halflings-regular.woff
Again, this shouldn't be necessary in any normal rails project using bootstrap-sass
, we just happen to be reusing a lot of views and this worked out for us. Hopefully this can assist someone else.
Here is what official documentation says regarding fonts not rendering.
Changing the icon font location Bootstrap assumes icon font files will be located in the ../fonts/ directory, relative to the compiled CSS files. Moving or renaming those font files means updating the CSS in one of three ways: Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Utilize the relative URLs option provided by the Less compiler. Change the url() paths in the compiled CSS. Use whatever option best suits your specific development setup.
Other than that it could be that you missed to copy the fonts folder to the root directory
-
I have missed to copy the font folder i don't know where is it ?can anyone help me ? – Swift Dec 27 '17 at 11:56
I had this problem and it was caused by the variables.less file. Overriding it to set the icon-font-path value solved the problem.
The file structured looks like this:
\Content
\Bootstrap
\Fonts
styles.less
variables.less
Adding my own variables.less file in the root of Content and referencing this in styles.less resolved the 404 error.
Variables.less contains:
@icon-font-path: "fonts/";
-
This helped me realise I nuked my path variable... random but yeah thanks! – Taylor A. Leach Aug 16 '18 at 17:00
I got Bootstrap from NuGet. When I published my site the glyphs didn't work.
In my case I got it working by setting the Build Action for each of the font files to 'Content' and set them to 'Copy Always'.
i had a box width code \e094 for glyphicon-arrow-down, in fact i solved the problem adding glyphicon in css class like that :
<i class="glyphicon glyphicon-arrow-down"></i>
if it could help someone ...
Make sure you aren't over specifying the font family, for example
*{font-family: Verdana;}
will remove the halflings font from i elements.
I was having the same problem where the browser was unable to find the font files, and my issue was due to exclusions in my .htaccess file that was whitelisting files that shouldn't be sent to index.php
for processing. As the font file couldn't be loaded the characters were replaced with BLOB.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
As you can see, files like images, rss, and xml are excluded from the rewrite, but the font files are .woff
and .woff2
files, so these also needed adding to the whitelist.
RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]
Adding woff
and woff2
to the whitelist allows the font files to be loaded, and the glyphicons should then display properly.
You must to set by this order:
<link rel="stylesheet" href="path/bootstrap.min.css">
<style type="text/css">
@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'); }
</style>
What worked for me was replacing routes from:
@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');
}
to
@font-face {
font-family: 'Glyphicons Halflings';
src: url('/assets/glyphicons-halflings-regular.eot');
src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
This is how you include the icon in bootstrap 3
<span class="glyphicon glyphicon-bell"></span>
http://glyphicons.bootstrapcheatsheets.com/
Hope that helps.
@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');}
I am using bootstrap with namespace and glyphicons not working but after adding above line in code glyphicons working fine.