Font-Awesome图标不通过BoostrapCDN呈现 [英] Font-Awesome icons not rendering via the BoostrapCDN
问题描述
我想通过BootstrapCDN链接使用Font-Awesome图标字体，我确信我有最新版本的：
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
我已将此链接放在< head> 我的html文件的一部分，我试图让它使用这个简单的html代码：
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
但不是呈现。我试过这个代码在最新版本的FireFox（27），Safari（7）和Chrome（33）。我检查了 fa 类是在我想调用的每个图标，并且 fa - 前缀，而不是旧的图标 - 前缀。我已使用此视频检查了我的代码实施 http://headwaythemes.com/ use-font-awesome-with-headway / （虽然对于一个WordPress主题，原则上代码应该工作相同），并查看堆栈溢出，但以前的问题，如 Fontawesome不加载没有给我任何帮助解决我的问题。
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
我没有安装fontawesome.otf，但肯定不是因为我可以在访问 http://fortawesome.github.io 。
我应该只是下载和托管字体文件以及我整个未来的网站我不必担心更新BoostrapCDN链接？ - 即使我只打算使用几个图标？
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
推荐答案
没有加载的原因是因为URI以//开头。这意味着它是一个协议相对路径，意味着它将使用页面正在使用的任何协议。如果您在本地打开HTML，那么您的浏览器将使用文件作为协议，因此尝试使用file：//访问字体awesome css。如果您使用本地或远程http网络服务器访问您的html，那么您将使用 http 协议访问该页面，因此使用http：//访问css。
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
解决方案：
- 更改css或模拟路径
有关详情：
以两个斜杠开头的URI。 ..他们的行为如何？
这篇关于Font-Awesome图标不通过BoostrapCDN呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
