Font-Awesome icons disappear in IE11 only after page refresh

[audreyaw]

Hi,

I believe this is a persisting problem with Font-Awesome and IE. I have actually found a solution, which is replacing the font-awesome js source to the CDN source. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />

However, I would like to use the local source instead of this easy solution. This problem only appeared after we changed the security of the website using SSL. We have to access the site using https, which I believe is the cause, but it is compulsory for the website to be secure, so I cannot fiddle with that.

If there is anyway to fix this issue without having to change the link of the source to CDN, I would greatly appreciate it.

[wolfy1339]

Please upgrade to 4.4.0 and try again

[audreyaw]

I've already upgraded to 4.4.0 and it didn't work. The icons still don't appear after refresh.

[tagliala]

Have you a live example?

[audreyaw]

Unfortunately the website is restricted only to our company and the client. Would image examples be ok?

[audreyaw]

When user accesses a page from the menu, it loads the font-awesome just fine, as depicted by below image: However, when user refreshes the page by clicking on the IE refresh icon or pressing F5, the icons don't appear, like so:

[MariMax]

I am 90% sure problem related to http headers and solution here please check that you don't serve files with "no-store" description here

[willyelm]

I had the same issue if you are running a https server with apache and have set:

Cache-Control: no-store

you need to remove it.

if for security reasons you still need to set no-store you can add this rule to the server apache conf:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Cache-Control "max-age=3600"
  </IfModule>
</FilesMatch>

basically you are going to allow IE to store the cache with the font files for 1 hour. which wont affect the security.

[tagliala]

If this is the reason of the issue, please let me know

Feel free to edit the troubleshooting wiki: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

[kikithedeveloper]

Hello, I think I am running into this issue as well. So I will like to know if this has solved anything.

[MariMax]

@kimb90 Just asked our backend team to remove no-store header for fonts response, it was the solution

[DevAndyroo]

Is there another workaround for this? What if it's required to have no-store cache?

[chetan2309]

Hi All,

Is there any concrete solution to this problem. We are facing this problem. However, it is intermittent.

One of the WikiIssues have a suggestion to use most updated FOntAwesome version link via CDN. IS that really a solution as we are using 4.4.0 and latest is 4.5.0?

Thanks, Chetan

[derekg23]

make sure to have type="text/css" in the link

[jml6m]

Because caching causes so many issues with AngularJS, we have to disable it. I tried adding @willyelm block but it did not work, and I suspect it's because we also have these lines in our app.js file:

$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.common.Pragma = "no-cache";

[darojuv]

I am facing same problem. We are .Net shop, and asp.mvc c# environment. We have to disable cache and use inhouse resources only can not use CDN From third party. Is there a way to host all these CSS, icons on differ web application on our IIS server and use it as CDN link ? If not we really need a concrete solution

[jeffers102]

I know this is an old thread, but maybe this will help someone else too. I solved this by adding an ETag header to my locally served files.

[zchpit]

Hi. I had same problem. I was using .net core on backend and angularjs on frontend. My solution:

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

and:

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

Files, that I mention is app.js on frontend, and Startup.cs (method name: ConfigureInternal(IApplicationBuilder app,... )) on backend.

[tagliala]

Hi guys,

Please notice that there are two isseus:

1. Internet Explorer
2. Microsoft IIS

The OP is about IE11 and CDN, so Microsoft IIS is not involved

the second case is explained here: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#im-hosting-fonts-on-my-server-and-icons-dont-show-up

[zchpit]

The problem is that, the browser (IE 11) need to recive: a) static content files need to have Cache-Control and Pragma with "public, max-age=600" b) angular requests need to have Cache-Control and Pragma with "no-cache"

How you do it is your concern.

[chupee120]

Hello, we use angularjs and have exactly same problem with Apache SSL.

How did you solve this issue?

[dhisharma]

@MariMax Do u have any alternate solution because cant remove no-store thats mandatory

[MariMax]

@dhisharma you can always use SVG instead of icon font. I don't have better solution than described above or replacing with SVG

[dhisharma]

@MariMax as a matter of fact i am using all the types - eot,woff,svg,ttf but still the problem is there when i reload all the icons are disappearing

[MariMax]

@dhisharma I'm not taking about font-face where you list all the possible formats, I'm talking about SVG which you put to your HTML instead of tags...

[dhisharma]

@MariMax no i am using tag in that i have a class that is referring to the content of the font.

[tagliala]

@dhisharma your other webfonts are hosted on your server or on google fonts?

[dhisharma]

@tagliala no in my server and i cant use cdns

[tagliala]

@dhisharma I would try:

• base64 font embedding for both your fonts. If your customers are only using IE11, you just need to embed the .woff file.
• nginx in front of IIS to serve the static assets (if the problem is IIS)
• https://stackoverflow.com/a/44378293

[dhisharma]

@tagliala base64 i was using and i did resolve the issue but the size of the bundle.config was becoming too large so need to find some workaround.

[tagliala]

@dhisharma sorry but if all webfonts disappear, the problem is not in FA itself. You could try a custom build with just the icons you need. You will save a lot of space: https://github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome

[dhisharma]

@tagliala i think the issue is coming in ie11 because after reloading its loading all the webfont types woff and ttf files but when i dont reload it has only the eot file type, is there any way i can fix this thanks

[tagliala]

@dhisharma if you don't need IE8 support, you could drop .eot.

Please also consider that if you have all the above constraints, maybe font awesome is not the right choice for your needs 😢

[dhisharma]

@tagliala i cant change all the icons at this stage of the application, its already in production. i have to find a way.

[bkilshaw]

This is happening to me in Firefox 67.0.2 using FA 5.9 served up locally. On a hard page reload it displays the icons fine, but a soft page refresh they display incorrectly:

[tagliala]

@bkilshaw I'm pretty confident this is a different issue.

Feel free to open a new issue by filling out our bug report template. A reproducible test case will help a lot

[sowna]

Hello folks, I m also facing issue that icons are not loading in IE after refresh. Can anyone please help me to resolve this issue, @dhisharma Can you please share what work around you did solve this issue as you discussed above, it will be very helpfull. Thanks in advance.

[Parthipan1990]

It would be helpful if we can solution for it

[ryo-egch]

same issue <mat-icon>exit_to_app</mat-icon> shows just string exit_to_app after refreshing browser