CODEWITHSUNDEEP
twitter-bootstrapinternet-explorerglyphicons
mattFer
mattFer

Reputation: 619

bootstrap 3.2.0 glyphicons are not displaying in internet explorer

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

Upvotes: 21

Views: 40635

Answers (9)

Jorge López Fernández
Jorge López Fernández

Reputation: 21

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?

Upvotes: 0

Jagadeeswara Rao
Jagadeeswara Rao

Reputation: 11

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

Upvotes: 1

Daryl
Daryl

Reputation: 610

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/

Upvotes: 0

Rajeesh K
Rajeesh K

Reputation: 51

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

Upvotes: 1

zchpit
zchpit

Reputation: 3121

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

Upvotes: 1

dblum
dblum

Reputation: 53

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>

Upvotes: 0

nbaosullivan
nbaosullivan

Reputation: 4144

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

Upvotes: 0

Tom Mettam
Tom Mettam

Reputation: 2973

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!

Upvotes: 31

mattFer
mattFer

Reputation: 619

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!

Upvotes: 40

Related Questions