字体和字体真棒图标无法通过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"/>

Answer 3

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 4

In my case change http source to https while using @import statement in css file works fine.

@import url(https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css);
[class*="fontawesome-"]:before {font-family: 'fontawesome', sans-serif;}

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

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 7

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.