bootstrap 3.2.0 glyphicons are not displaying in internet explorer

Question

I am useing twitter bootstrap 3.2.0 and I use some glyphicons they work properly in ff, chrome, and opera but they are not displayed within the Internet Explorer.

The strange thing is, if i open the getbootstrap.com website and look at the "Components" section, even there they aren't displayed properly, so I doubt any implementing issues on my side.

Does anybody else have a similiar issue?? Or is knowing something about this behaviour?

Here is a Scrennshot of how it looks in my Internet Explorer 11

http://we.tl/nsDnTiZqoZ

Check network tab if it throws 404 for the fonts it is using.. — Rahul Patil, Aug 13 '14 at 08:20
Presumably you have a weird font or IE plugin installed. Check in the inspector what actual font IE is using. — cvrebert, Aug 13 '14 at 22:37
I don't think it's a plugin problem, because I am useing the IE just for testing, so I don't have an plugins installed. And the font-family which is used in the CSS is called "Glyphicons Halflings". This should be the right one, shouldn't it? — mattFer, Aug 14 '14 at 06:44

score 40 · Accepted Answer · answered Aug 14 '14 at 09:08

40

Ok, solved the Problem by myself.

The Problem was, that somehow my IE went in a certain security state, in which the font download was disabled.

So I changed the Custom level of the "protected Mode" - you can find that in the Security Tab of the Internet Options Menu.

After you click on the "Custom level..." Button you have to search for "font download" and change it to "enable".

Thanks for your help anyone!

answered Aug 14 '14 at 09:08

mattFer

619
1
5
10

4

Good find. I was stuck for hours on this till I found your fix. IT'd be nice if IE actually displayed a warning in the console that it wasn't downloading fontawesome. Thanks. – Shane Rowatt Jul 09 '15 at 00:54
2

This isn't working for me because the icons are not showing in all browsers. They are loaded correctly and there's no 404 or any other errors showing. Any other ideas ? The FONT DOWNLOAD is enabled – Marc Roussel Feb 07 '17 at 21:02

score 31 · Answer 2 · answered Mar 15 '16 at 15:53

31

For those of you who may be experiencing a similar issue, there is a bug in Internet Explorer which causes webfonts not to render under certain cache-control situations.

If the server is sending the header Pragma: no-cache and/or Cache-Control no-store, this will cause IE to fail to render the glyphs.

This took me hours to track down, so hopefully posting here will help others save time!

answered Mar 15 '16 at 15:53

Tom Mettam

2,903
1
27
38

3

This solution works! Somehow that no-cache header does not always work and causing more issues. Thank you. – Jeson Martajaya Oct 12 '16 at 21:36
2

Yes, this is the true answer, the practical one is [here](http://stackoverflow.com/a/43094389/1767316) – user1767316 Mar 29 '17 at 13:08

score 1 · Answer 3 · answered Oct 05 '17 at 08:15

Like I mention in this thread: github

The problem is that, the browser (IE 11) need to recive:

static content files need to have Cache-Control and Pragma with "public, max-age=600"
angular requests need to have Cache-Control and Pragma with "no-cache"

In my app (.net core + angular)

app.js

var cacheConfig = function ($httpProvider) {

$httpProvider.defaults.headers.common["Cache-Control"] = "no-cache";
$httpProvider.defaults.cache = false;

if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}

$httpProvider.defaults.headers.get["If-Modified-Since"] = "0";
};

Startup.cs

  app.UseStaticFiles(new StaticFileOptions
            {
                OnPrepareResponse = ctx =>
                {
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=600");
                    ctx.Context.Response.Headers.Append("Pragma", "public,max-age=600");
                    //ctx.Context.Response.Headers.Append("ETag", DateTime.Now.Ticks.ToString());
                }
            });

Rajeesh K · Answer 4 · 2018-02-14T00:28:47.647

This is too late to answer , but recently i faced issue with Angular 4 + grails as backend. For me all the resources in webapp folder in grails was setting the

Cache-control : 'no-store'.

and there is no header like modified-since , or expires etc. This was causing the issue. I updated the application.yml like below to fix this issue , and it worked for me.

grails:
    resources:
        cachePeriod: 10

and this will set response header like below

Cache-Control   : max-age=10

score 1 · Answer 5 · edited Dec 04 '19 at 12:22

Load the bootstrap.css from CDN instead of the resources folder in the application. It worked for me after loading from CDN.

Check-in networks tab what are the files which are using the glyphicon-screenshot or icons which are not loading. in my case, it is "glyphicon-screenshot" not loading in IE 11 browser.

Before that check, the font(s) are enabled

and Icon(s) which are not loaded will show error in styles tab f12 debug tool.

score 0 · Answer 6 · answered Aug 23 '16 at 16:13

0

To solve on a nginx setup I added this to our config file

# Favicon and fonts
location ~* \.(ico|woff|ttf|svg|eot|otf)$ {
        expires 1w;
        access_log off;
        add_header Cache-Control "public";
}

answered Aug 23 '16 at 16:13

nbaosullivan

4,034
3
21
14

score 0 · Answer 7 · answered Mar 07 '17 at 09:41

To solve on a wildfly setup you need to change your standalone.xml file at the untertow section:

<server name="default-server">
    <host name="default-host" alias="localhost">
        ...
        <filter-ref name="custom-max-age" predicate="path-suffix['.woff'] or path-suffix ['.woff2'] or path-suffix ['.ttf'] or path-suffix ['.svg'] or path-suffix ['.eot'] or path-suffix ['.otf']"/>
    </host>
</server>
<filters>
    <response-header name="custom-max-age" header-name="Cache-Control" header-value="public"/>
</filters>

score 0 · Answer 8 · answered Apr 25 '18 at 17:46

In our case, our enterprise windows 10 images have a setting to block untrusted fonts that only affects IE11. Chrome/FF/Edge all display the fonts correctly. Accessing our site on my personal machine (not my company machine) in IE11 showed the fonts perfectly fine.

See this article for details:

https://blogs.technet.microsoft.com/secguide/2017/06/15/dropping-the-untrusted-font-blocking-setting/

score 0 · Answer 9 · answered Jul 03 '20 at 12:05

If you are having this problem with a Java application, a solution could be to create a Filter (subclass of javax.servlet.Filter) that prevents those headers to be set in responses from requests to the fonts folder. This seems to work fine for our project. Make sure the filter is configured as one of the first components in your web.xml file. More info here How do delete a HTTP response header?

bootstrap 3.2.0 glyphicons are not displaying in internet explorer

9 Answers9

Linked