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

Answer 1

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!

Answer 2

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!

Answer 3

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());
                }
            });

Answer 4

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

Answer 5

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 enter image description here and Icon(s) which are not loaded will show error in styles tab f12 debug tool. enter image description here

Answer 6

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";
}

Answer 7

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>

Answer 8

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/