font awesome icon is not appearing in IE 11, but s

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?

Answer 1

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:

1. The request is being initiated from font-face, over an HTTPS connection (critical for re-producing this bug locally).
2. 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

Answer 2

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

Answer 3

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

Answer 4

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 >

Answer 5

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

Answer 6

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.