font awesome icon is not appearing in IE 11, but showing in other browsers

Question

I am new to font-awesome icons. I have one page in which there is a filter where user can search the data. I have added font awesome icon just before the search link (as per below screenshot), I can see this icon in all the browsers except IE 11. The funny thing is I have this icon in other pages also and I can see it in IE 11, but I cannot see this icon on this (as per below screenshot) page only.

Here is the screenshot from IE 11:

Here is the screenshot from chrome:

Can anyone help me out on this?

Antoine Dusséaux · Answer 1 · 2018-05-16T20:04:40.970

23

I had the same issue, I solved it by adding this meta tag as the FIRST tag in <head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Also, according to the official documentation, check the following:

For Internet Explorer: you don't serve files with no-store option in Cache-control header (Ref: #6454);
For Internet Explorer and HTTPS: you don't serve files with no-cache option in Pragma header.

edited May 16 '18 at 20:04

answered Aug 20 '16 at 15:47

Antoine Dusséaux

3,740
3
23
28

score 13 · Answer 2 · edited Nov 13 '18 at 00:51

13

IE has an issue with @font-faces being delivered with the HTTP-Header Pragma=no-cache. You can see it recorded on the issue tracker here

Unfortunately the issue is marked as not resolvable but there are some workarounds. The one that worked for me was using a servlet filter that avoids the Pragma header being set.

Other solutions that not worked for me:

Font-awesome disappears after refresh for all ie browsers ie11,ie10,ie9

Font awesome icons becomes invisible in IE after refresh

edited Nov 13 '18 at 00:51

ChrisM

1,565
14
24

answered Sep 17 '15 at 10:56

Josema

1,807
1
17
15

2

I think it's worth mentioning here that IE does not cache when the "Vary" header is present. So you may need to remove that header in addition to removing the Pragma / Cache-Content: no-cache header. https://jakearchibald.com/2014/browser-cache-vary-broken/ – Crashthatch Jul 18 '17 at 16:30
FYI the original MS Connect link is dead because MS Connect is dead. This appears to be a reference to the issue on the issue tracker https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/928481/ As you can see it is marked as "WONT FIX". There's also this SO post: https://stackoverflow.com/questions/11135282/font-face-wont-load-via-https-in-ie – ChrisM Nov 12 '18 at 17:35

score 6 · Answer 3 · answered Aug 25 '16 at 09:43

From IE console try to run following script

$('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" />');

If it work then try to import it CDN instead of storing it locally.

score 4 · Answer 4 · answered Feb 11 '19 at 16:55

Alternatively, it might be your Internet Explorer settings that prevent the browser from downloading fonts. This was the case on one of our tightly secured servers.

Try these steps:

Open Internet Explorer
Go to Internet Options
Under Security tab, click on Custom Level...
Scroll down to Downloads and make sure the Font Download is Enabled

score 3 · Answer 5 · answered Nov 22 '17 at 12:48

If you are using Spring MVC with Spring Security, Spring Security automatically adds no cache headers and so causes font-awesome to break on IE11.

(https://docs.spring.io/spring-security/site/docs/current/reference/html/headers.html#headers-cache-control)

I solved the issue by adding a ResourceHandler in my WebMvcConfiguration for font-awesome configured to allow the browser to cache the fonts.

public class WebMvcConfiguration extends WebMvcConfigurerAdapter
{
    @Override
    public void addResourceHandlers( ResourceHandlerRegistry registry )
    {
        registry.addResourceHandler("/assets/vendor/font-awesome/fonts/**")
            .addResourceLocations("/assets/vendor/font-awesome/fonts/")
            .setCachePeriod(31556926);        
    }
}

score 3 · Answer 6 · answered Apr 03 '18 at 08:45

3

I faced the same Issue and I just added the following Link in the Tag and it worked.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Hope this helps!

answered Apr 03 '18 at 08:45

Sreeram Nair

2,369
12
27

score 2 · Answer 7 · answered Apr 07 '17 at 06:21

If apache server is serving Font files, addthe following entries to the httpd.conf or .htaccess in .

To set right mime-types for font files, add this lines to config:

 AddType application/vnd.ms-fontobject .eot
 AddType font/truetype .ttf
 AddType font/opentype .otf
 AddType font/opentype .woff
 AddType image/svg+xml .svg .svgz

To update font files headers, This fix perfectly worked to render Font Icons in IE Browsers.

<LocationMatch "\.(eot|otf|woff|ttf)$">
   Header unset Cache-Control
   Header unset no-store
</LocationMatch >

score 1 · Answer 8 · answered Feb 24 '16 at 01:05

1

This fixed my font-icons in IIS: Add a web.config to your font directory with these contents:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Pragma" value="none" /> 
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

answered Feb 24 '16 at 01:05

ChrisGheen

984
6
17

Okay. Will try it out. Thanks! – Rohit Gaikwad Feb 24 '16 at 09:06
Great solution, in our application we need no-store and no-cache headers for security reasons (added through web.config in root project). Then in fonts folder, we added new web.config with following instructions: which fixed our issue. – Verthosa May 05 '17 at 11:22
Hi @ChrisGheen could you please cite your source? I haven't found a reference where "none" is a valid value for "pragma". See: https://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.32 Thanks – Andres Nov 07 '17 at 16:14

score 1 · Answer 9 · answered Oct 06 '16 at 00:54

I had the same issue with font awesome. I added a custom httpmodule in my .net application.

public class MyHttpModule : IHttpModule
    {
        public void Dispose()
        {
        }
        public void Init(HttpApplication context)
        {
            context.EndRequest += new EventHandler(Context_EndRequest);
        }
        protected void Context_EndRequest(object sender, EventArgs e)
        {
            HttpResponse response = HttpContext.Current.Response;
            if (string.Compare(HttpContext.Current.Request.Browser.Browser, "InternetExplorer", StringComparison.InvariantCultureIgnoreCase) == 0)
            {
                response.Headers.Set("Pragma", "none");
            }
        }
    }

And registered the module in web.config.

<system.webserver>
    <modules>
          <add type="MyHttpModule, Culture=neutral" name="MyHttpModule"/>
    </modules>
</system.webserver>

It solved the issue.

System.Web.HttpException HResult=0x80004005 Message=Server cannot append header after HTTP headers have been sent. Source=MyModule StackTrace: at MyModule.MyHttpModule.Context_EndRequest(Object sender, EventArgs e) in T:\Websites\MyModule\MyModule\MyModule.cs:line 27 — David, Oct 23 '19 at 01:06

score 1 · Answer 10 · answered Oct 18 '18 at 12:17

1

I had the same issue with Font Awesome 4.7 and IE 11. I fixed it by adding the following meta info in the <head> section:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

answered Oct 18 '18 at 12:17

Cuder

163
2
8

score 1 · Answer 11 · answered Apr 23 '19 at 01:22

We recently had this issue serving Font Awesome font files from our Rails application. The confusion was that we weren't passing Pragma or Cache-control response headers - so the previous answers in this post were a bit confusing.

To summarize - this issue is caused by these two conditions:

The request is being initiated from font-face, over an HTTPS connection (critical for re-producing this bug locally).
The Pragma header has the value no-cache OR in our case, we're serving everything gzipped, and the Vary header is passed with a value other than Accept-Encoding.

We fixed this by adding the following to our Rack::CORS config:

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'

        # Setting Vary to Accept-Encoding required or IE11 fonts will not load from local cache
        resource('*.eot',
                 headers: :any,
                 credentials: false,
                 methods: [:get],
                 vary: ['Accept-Encoding'])
      end
    end

score 1 · Answer 12 · answered Feb 13 '20 at 08:46

I faced the same issue. My technology stack is Spring boot 2.0 and Angular 8. This issue occurs only when you try to refresh the page over HTTPS on IE 11.

The problem is, the browser (IE 11) expects Cache-Control max-age. You need to set this header for static resources. To resolve this issue set the following property in application.property file.

spring.resources.cache.cachecontrol.max-age=14400

score 0 · Answer 13 · answered Aug 10 '18 at 09:52

0

In my case, it was corrupted .eot font file. I had generated new one ( + new .css styles) and it fixed the problem. Try it.

answered Aug 10 '18 at 09:52

Paweł Bednarczyk

13
1
5

score 0 · Answer 14 · answered Mar 14 '19 at 13:06

I've encountered the same issue, searched everywhere and no luck. It appears it was due to Microsoft cumulative Security update which stopped loading Fonts/Images especially :

https://support.microsoft.com/en-us/help/4486474/cumulative-security-update-for-internet-explorer-february-12-2019

https://support.microsoft.com/en-us/help/4491113/cumulative-update-for-internet-explorer-february-19-2019

To fix it you need to install the March patch:

https://support.microsoft.com/en-us/help/4489873/cumulative-security-update-for-internet-explorer-march-12-2019

score 0 · Answer 15 · answered Apr 16 '20 at 06:49

0

For internet explorer 11, you can change your CSS like that :

nb-icon.menu-icon { 
                  visibility: hidden; 
                  } 
nb-icon.menu-icon::before{ 
                  visibility: visible; 
                  }

answered Apr 16 '20 at 06:49

Yassin Mohamadi

27
5

score 0 · Answer 16 · edited Jul 12 '20 at 21:16

0

either of 2 solutions worked for me

Check whether all the below mentioned FontAwesome.otf fontawesome-webfont.eot fontawesome-webfont.svg fontawesome-webfont.ttf fontawesome-webfont.woff fontawesome-webfont.woff2
And I deleted the version parameter, eg. ?v4.7.0 in every src of the font in the CSS and it is now working in my IE 11.

edited Jul 12 '20 at 21:16

Dharman

30,962
25
85
135

answered Jul 12 '20 at 21:10

Nirav Mehta

6,943
9
42
51

font awesome icon is not appearing in IE 11, but showing in other browsers

16 Answers16

To set right mime-types for font files, add this lines to config:

To update font files headers, This fix perfectly worked to render Font Icons in IE Browsers.

Linked