Font Awesome With HTTPS

Question

So I'm experiencing an issue with Font Awesome in IE8 when using HTTPS in my own site and this is even reproducible on Font Awesome's own site. If I go to Font Awesome over HTTPS in IE8 I get boxes for all of the icons however if I go to Font Awesome over HTTP I get the icons rendered correctly.

What is the problem here? I've heard it could be something to do with the relative font paths in Font Awesome over HTTPS but not sure about that.

Here is a screenshot for those who like such things:

Update

So here is the code that references the fonts and loads the CSS. I'm going to use the code from Font Awesome's site since this seems to be an issue with Font Awesome and not necessarily something with my site:

HTML that references CSS and an icon:

<link rel="stylesheet" href="../assets/css/site.css">
<link rel="stylesheet" href="../assets/css/pygments.css">
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.css">
...
<div class="fa-hover col-md-3 col-sm-4">
   <a href="../icon/adjust"><i class="fa fa-adjust"></i> fa-adjust</a>
</div>

Within in font-awesome.css:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),
  url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 1

I've determined the issue and will post the answer in case anyone else experiences the same issue. The problem was with the HTTP cache headers we were sending along with the font file. Apparently this causes IE8 over HTTPS to not load the fonts for some reason (if anyone knows the true reason please comment below). The successful headers should look like this:

HTTP/1.1 200 OK
Content-Type: application/vnd.ms-fontobject
Date: Wed, 26 Mar 2014 23:57:04 GMT
ETag: "08b27bc96115c2d24350f0d09e6a9433f"
Last-Modified: Wed, 26 Mar 2014 12:10:02 GMT
Server: Apache-Coyote/1.1
Content-Length: 38205
Connection: keep-alive

but instead were being sent like this:

HTTP/1.1 200 OK
**Cache-Control: max-age=31556926, must-revalidate
Content-Type: application/vnd.ms-fontobject
Date: Wed, 26 Mar 2014 23:58:06 GMT
ETag: "08b27bc96115c2d24350f0d09e6a9433f"
**Expires: Fri, 27 Mar 2015 05:46:52 GMT
Last-Modified: Wed, 26 Mar 2014 12:12:12 GMT
**Pragma: no-cache
Server: Apache-Coyote/1.1
**Set-Cookie: JSESSIONID=844B0798B373A3B8ED54A694C9DFB5C5; Path=/; Secure; HttpOnly
Content-Length: 38205
Connection: keep-alive

Answer 2

This happens in IE only with https.

Remove any HTTP headers from the fontawesome relevant files that prevent caching, e.g.

Expires -1
Pragma: no-cache

After removing the cache control for these files you should see your icons. After reloading your page all the relevant fontawesome files should show HTTP code 304, i.e. the file comes from the browsers cache.

Answer 3

i think the same,

something to do with the relative font paths in Font Awesome over HTTPS

Answer 4

add NoCacheHeaderFilter in web.xml and provide the exclude file paths.

<filter>
    <filter-name>NoCacheHeaderFilter</filter-name>
    <filter-class>NoCacheHeaderFilter</filter-class>
    <init-param>
        <param-name>exclude</param-name>
        <param-value>^/(image|css|js|fonts|lib|partials)/.*</param-value>
    </init-param>
</filter>

add filter like this.

    if (null != exclude) {
        HttpServletRequest httpRequest = (HttpServletRequest) request;
        HttpServletResponse httpResponse = (HttpServletResponse) response;

        String context = httpRequest.getContextPath();
        String path = httpRequest.getRequestURI().substring(context.length());
        if (!exclude.matcher(path).matches()) {
            httpResponse.setHeader("Pragma", "no-cache");
            httpResponse.setHeader("Cache-Control", "private, max-age=0, no-store, no-cache");
            httpResponse.setDateHeader("Expires", System.currentTimeMillis());
        }
    }

    chain.doFilter(request, response);

Answer 5

The practical answer is,using a proxy, to hide to the browser any cache-control and pragma: "no-cache" header returned to the browser. I used nginx like this, adding the folowing commands the https proxied location:

  proxy_hide_header Cache-Control;
  proxy_hide_header Pragma; 

See here for details.