字体-真棒图标不通过BoostrapCDN渲染

StackOverflow https://stackoverflow.com//questions/22002238

  •  20-12-2019
  •  | 
  •  

题

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

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

我把这个链接放在 <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>

但是它不是渲染。我已经在最新版本的FireFox（27），Safari（7）和Chrome（33）中尝试过此代码。我已经检查过 fa 类是在我试图调用的每个图标上，也是 fa- 前缀被使用，而不是旧的 icon- 前缀。我已经用这个视频检查了我的代码实现 http://headwaythemes.com/using-font-awesome-with-headway/ （虽然意味着一个WordPress主题，在原则上代码应该工作相同），并环顾四周堆栈溢出，但以前的问题，如 Fontawesome未加载 在解决我的问题方面没有给我任何帮助。

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

有帮助吗？

解决方案

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

解决方案:

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

更多信息:URI以两个斜杠开头。..他们表现如何？

其他提示

这样一个更简单的方法来处理这个问题-只需在cdn行前面添加'http：'，它就可以在您的本地机器上工作，即像这样:

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

Ta-daa！

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

$python-m SimpleHTTPServer

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top