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.

T

Answer 1

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.

Answer 2

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 3

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/

Answer 4

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 5

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 6

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?