Fonts and Font Awesome Icons Not Loading Over Ssl

Fonts and Font Awesome icons not loading over SSL

Try remove http: from href:

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

There is a great article about protocol-relative here: paulirish.com/2010/the-protocol-relative-url/

After enabling SSL icon font doesn't display correctly if http version of the website is called

Yes, httpd.conf <VirualHost> entries allow you to run both https://www.example.com (on port 443) and http://www.example.com (on port 80). You can even point them at the same physical disk locations (probably not the best idea).

You'll want to either supply "www" always or never. (ie. redirect to "www.yoursite.com" if www was not sent. Otherwise things like this will keep popping up.

In HTML/CSS you can specify "//somefile.example" to indicate you are making an absolute path reference but want to keep the same scheme that was used.

You can check your certificate to see what it is valid for in linux via:

openssl x509 -noout -in /yourcertfile -subject -issuer -dates

You want to make sure the CN= (Common Name) matches the hostname of your web server including any subdomains (ie. "www")

Font Awesome With HTTPS

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

Icons not loading only when stylesheet is included

I managed to target the problem to a single part of my stylesheet: * { font-family: Avenir, sans-serif !important; } I wrote this line to standardize the website font, but it's that line that's conflicting with the icons. Any idea as to why this is? And any suggestions for setting the font in a way that won't conflict?

!important tells the property to ignore any specificity. This means that your font-family declaration will completely override the Font Awesome font.

Generally, the only things browsers explicitly set font-family on are the html, body, input, select, textarea and button elements. With this in mind, you should be able to completely override any default fonts by simply using the following:

html, body, button, input, select, textarea {
  font-family: Avenir, sans-serif;
}

If that doesn't work for you, inspect your page to determine where your custom font isn't being included and add those selectors into the above declaration.

Icon fonts not loading in IE11

Ran into a similar problem, and from your screenshot above, the response has a Cache-Control header of 'no-store'. IE seems to have issues with caching and fonts.

Removing both the 'Cache-Control: no-store' and the "Pragma: no-cache" headers worked for us to get icon fonts to show up again.

https://github.com/FortAwesome/Font-Awesome/issues/6454

Font awesome icons not working with bootstrap

Add http: to the href so it looks like this:

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

EDIT: If your page uses HTTPS, link to the font-awesome CSS using HTTPS (replace http:// with https:// in the link above).

---

Related Topics