问题

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?

回答1:

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.

回答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.

回答3:

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.

回答4:

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

回答5:

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 >

回答6:

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>

回答7:

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.

回答8:

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!

回答9:

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" />

回答10:

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

回答11:

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

回答12:

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

回答13:

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

来源：https://stackoverflow.com/questions/31291414/font-awesome-icon-is-not-appearing-in-ie-11-but-showing-in-other-browsers

标签

internet-explorer-11

font-awesome

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

问题