Question

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

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

我已将此链接放在我的html文件的<head>部分中，我正在尝试使用以下简单的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>

然而，它不是渲染。我在最新版本的FireFox（27），Safari（7）和Chrome（33）中尝试过这段代码。我已经检查过fa类在我试图调用的每个图标上，并且还使用了fa-前缀而不是旧的icon-前缀。我已经使用这个视频检查了我的代码实现http://headwaythemes.com/using-font-awesome-with-headway/（虽然主要用于WordPress主题，但代码应该工作相同）并查看堆栈溢出，但之前的问题如Fontawesome not loading避难所在解决我的问题上给了我任何帮助。

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

Answer 1

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

<强>解决方案：

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

欲了解更多信息： URI starting with two slashes ... how do they behave?

Answer 2

这种更简单的处理方式 - 只需添加＆＃39; http：＆＃39;在cdn行的前面，它可以在你的本地机器上工作，就像这样：

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

的Ta-DAA！

Answer 3

Pulkit的回答是绝对正确的。只是要添加，如果你想创建一个快速的本地服务器，只需转到html和css页面的目录，然后转到终端并输入 -

$ python -m SimpleHTTPServer

然后，转到浏览器并转到127.0.0.1:8000 如果它没有显示，请尝试将您网站的主页更改为index.html

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

3 个答案: