Font awesome icons becomes invisible in IE after refresh

Question

I am facing the issue with IE browser.It is loading the icons for first time load. but if i refresh the page the icons are not visible. Can you please tell me how to fix this from server side? This is related to Font-awesome disappears after refresh for all ie browsers ie11,ie10,ie9 . but it does nt have the complete solution

You will have to post code that demonstrates the problem. Also, what is incomplete about the other solution? — Dour High Arch, Oct 30 '14 at 04:36

score 5 · Answer 1 · answered Dec 19 '14 at 14:56

5

We had this same problem because we were storing the FA CSS file locally. The font @import's would fail on refreshes, probably because it does a different HTTP call than the one for the local file. We reverted to their CDN and it fixed the problem. If you downloaded the FA files and aren't pulling them in through a CDN, then change your <link> tag in your <head> to:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Once we did that FontAwesome was being served up on every refresh without problem.

answered Dec 19 '14 at 14:56

Charles Harris

304
1
2
18

1

This is not really a complete answer. Does anyone know what the actual problem is? What does IE not like with a local copy of the CSS? I am having this problem but I must host the file locally do to project restrictions. – Mike Oct 19 '15 at 18:39
The problem causing this is described in more detail in this answer: http://stackoverflow.com/a/32628649 – philreed Jan 25 '16 at 12:11

score 2 · Answer 2 · answered May 12 '16 at 20:29

In my case i was using java and the only thing that works was this cache filter that i made.

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebFilter("*")
public class CacheFilter implements Filter {

    /**
     * @constructor CacheFilter
     * @date 28/09/2015
     */
    public CacheFilter() {
        //construtor
    }

    /* (non-Javadoc)
     * @see javax.servlet.Filter#destroy()
     */
    @Override
    public void destroy() {
        //metodo vazio
    }

    /* (non-Javadoc)
     * @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest, javax.servlet.ServletResponse, javax.servlet.FilterChain)
     */
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        String page = httpRequest.getRequestURI();

        if (!page.contains("fontawesome-webfont") || !page.endsWith(".eot")){
          httpResponse.setHeader("Expires", "-1"); 
          httpResponse.setHeader("Cache-Control", "no-store, no-cache, must-revalidate, post-check=0, pre-check=0"); 
          httpResponse.setHeader("Pragma", "no-cache"); 
        }else if(page.contains("fontawesome-webfont") && page.endsWith(".eot")){
            httpResponse.setHeader("Expires", "-1"); 
            httpResponse.setHeader("Cache-Control", "public");
            httpResponse.setHeader("Pragma", "cache");
        }

        chain.doFilter(request, response);
    }

    /* (non-Javadoc)
     * @see javax.servlet.Filter#init(javax.servlet.FilterConfig)
     */
    @Override
    public void init(FilterConfig fConfig) throws ServletException {
        //metodo vazio
    }

}

score 1 · Answer 3 · answered Aug 07 '17 at 07:49

I did the same thing as https://stackoverflow.com/a/37196841/1982385 except that I did it on the reverse proxy (HAProxy) instead of from the servlet itself.

backend app
    server server1 10.10.14.4:9090 check
    acl is_woff capture.req.uri -m sub .woff
    acl is_ttf capture.req.uri -m sub .ttf
    acl is_eot capture.req.uri -m sub .eot
    http-response set-header Cache-Control public if is_eot or is_woff or is_ttf
    http-response set-header Expires -1 if is_eot or is_woff or is_ttf
    http-response set-header Pragma cache if is_eot or is_woff or is_ttf

score 1 · Answer 4 · answered May 03 '18 at 04:16

Suggestion provided by CV Harris is working fine. But, we didn't want to use files from CDN.

For us, icons issue occurred after upgrading Spring Security to 4.2.3. So, as given in Spring security configuration, added following in spring configuration.

defaults-disable="true"

Now icons are displayed in IE11.

score 0 · Answer 5 · answered Jul 12 '19 at 12:24

I know... old question... but still relevant. I had the same issue... using a CDN worked, but not hosting the FA css myself.

Turns out it was related to caching as others have suggested. I had turned caching off for everything in the BeginRequest method below (for some reason which now escapes me... troubleshooting something else probably), but it seems that FA really wants to be cached... /shrug.

    protected void Application_BeginRequest()
    {
        Context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
    }

Commenting this out fixed FA icons on refreshes, though I now have the task of making it a little more fine grained...

Font awesome icons becomes invisible in IE after refresh

5 Answers5

Linked