CSS 字体和 Font Awesome 图标未通过 SSL 加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26616400/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fonts and Font Awesome icons not loading over SSL
提问by viljow
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.
我试图让我的网站通过 SSL 正确加载，每次查看页面时，图标和字体都没有加载。
Here's what I'm using for my CSS and font awesome.
这是我用于我的 CSS 和字体真棒。
<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
回答by marcelo2605
Try remove http: from href:
尝试删除 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/
这里有一篇关于协议相关的很棒的文章：paulirish.com/2010/the-protocol-relative-url/
回答by sp_omer
I had the same SSL/TLS error/issue over the chrome. It worked OK on the firefox. I had to switch the sources.
我在 chrome 上遇到了相同的 SSL/TLS 错误/问题。它在 Firefox 上运行正常。我不得不切换来源。
There is issue with MaxCDN you need to use KeyCDN.
MaxCDN 存在问题，您需要使用 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"/>
回答by Chetabahana
In my case change httpsource to httpswhile using @importstatement in css fileworks fine.
在我的情况下，将httpsource更改为httpswhile using css 文件中的@import语句工作正常。
@import url(https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css);
[class*="fontawesome-"]:before {font-family: 'fontawesome', sans-serif;}
回答by newDevGeek
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
也许它是使用“http”而不是“https”的一个简单问题，因为谷歌 API 使用 https 进行安全链接传输。用 https 替换 http
回答by user1851694
Try downloading the font-awesome zip (css & assets) and serve them from your own server/directory - instead of using the CDN links.
尝试下载字体很棒的 zip（css 和资产）并从您自己的服务器/目录中提供它们 - 而不是使用 CDN 链接。
Then just refer to the font-awesome css file in your own directory using https://
然后只需使用 https:// 引用您自己目录中的 font-awesome css 文件
This worked for me.
这对我有用。
回答by bcarroll
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.
我假设您的网络浏览器阻止从为 HTTPS 配置的服务器加载 HTTP 资源，这被称为“混合内容”，并被标记为安全风险。
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.
也许您的网络浏览器已自动更新到不允许加载混合内容的较新版本。
回答by user1851694
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.
我遇到了同样的问题 - 在多次尝试使用 CDN 链接后，无论有没有https://..，我决定下载字体很棒的 zip 文件并从我自己的服务器上提供它们。
Put all the cssand assetson your own server, instead of loading them from the CDN link with https://..
将所有css和assets放在您自己的服务器上，而不是从 CDN 链接加载它们https://..
Then, just refer to font-awesome.cssfile using https://..
然后，只需font-awesome.css使用 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.
在转了一圈之后，这为我解决了这个问题。
