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

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/

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"/>