Font-Awesome图标无法通过BoostrapCDN呈现

Bri*_*dez 4 html css fonts font-awesome

我正在尝试通过BootstrapCDN链接使用Font-Awesome图标字体,我很确定我有最新版本:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Run Code Online (Sandbox Code Playgroud)

我把这个链接放在<head>我的html文件的一部分,我试图让它使用这个简单的HTML代码:

<!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>
Run Code Online (Sandbox Code Playgroud)

然而,它不是渲染.我在最新版本的FireFox(27),Safari(7)和Chrome(33)中尝试过这段代码.我已经检查过这个fa类在我试图调用的每个图标上,并且还使用了fa-前缀而不是旧icon-前缀.我已经通过这个视频http://headwaythemes.com/using-font-awesome-with-headway/检查了我的代码实现(虽然用于WordPress主题,原则上代码应该工作相同)并环顾四周堆栈溢出,但之前的问题,如Fontawesome没有加载没有让我任何帮助解决我的问题.

我没有安装fontawesome.otf,但是如果我在访问http://fortawesome.github.io时能看到字形,那肯定不是.
我是否应该下载并托管字体真棒文件以及我未来的整个网站,以便我也不必担心更新BoostrapCDN链接? - 即使我只计划使用几个图标?

小智 5

它没有加载的原因是因为URI以"//"开头.这表示它是协议相对路径,这意味着它将使用页面正在使用的任何协议.如果你在本地打开你的html,那么你的浏览器将使用file作为协议,因此尝试使用"file://"访问font-awesome css.如果使用本地或远程http Web服务器访问html,则可以使用http协议访问该页面,从而使用"http://"访问css.

解:

  1. 更改css的路径或模拟本地计算机上的css.
  2. 运行本地或远程http服务器并访问该页面.

有关更多信息: URI以两个斜杠开头......它们的行为如何?