Fonts and Font Awesome icons not loading over SSL

Question

I'm trying to get my website to load correctly over SSL, and every time I view the page, the icons and font aren't loading.

Here's what I'm using for my CSS and font awesome.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600' rel='stylesheet' type='text/css'>

Here's a link to the website in case you want to check the full code

Answer 1

I assume your webbrowser blocked the HTTP resources from being loaded from a Server that is configured for HTTPS, which is referred to as "Mixed Content", and is flagged as a security risk.

A secure site should never load resources via a non-secure mechanism.

Perhaps your webbrowser auto-updated to a newer version that does not allow Mixed Content to the loaded.

What is Mixed Content? - Google Developers

Answer 2

I had the same SSL/TLS error/issue over the chrome. It worked OK on the firefox. I had to switch the sources.

There is issue with MaxCDN you need to use KeyCDN.

Switch from:

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

to:

<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>

Answer 3

I had this same problem - after lots of attempts using the CDN links, with and without https://.., I decided to download the font-awesome zip file and serve them instead from my own server.

Put all the css and assets on your own server, instead of loading them from the CDN link with https://..

Then, just refer to font-awesome.css file using https://..

Eg:

<link rel="stylesheet" href="https://yourdomain-name.com/assets/font-awesome-4.7.0/css/font-awesome.min.css">

This fixed it for me, after going round in circles.

Answer 4

Try using

//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

and maybe its a simple issue of using "http" instead "https" because the google apis use https for secure link transfer. Replace http with https

Answer 5

Try downloading the font-awesome zip (css & assets) and serve them from your own server/directory - instead of using the CDN links.

Then just refer to the font-awesome css file in your own directory using https://

This worked for me.

Answer 6

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/