字体真棒图标无法在浏览器中正确显示答案

【问题标题】：Font Awesome Icons do not display correctly across browsers字体真棒图标无法在浏览器中正确显示
【发布时间】：2016-06-13 18:58:38
【问题描述】：

我在页脚中使用了一些来自 font awesome 的图标，这些图标链接到其他页面。这些图标在我的本地服务器上加载良好，在我的 codepen 上加载良好。但是，这些图标没有出现在 Internet Explorer 上，我的整个页脚也从谷歌浏览器中消失了。这是什么原因造成的？

这里是codepen的链接：http://codepen.io/sibraza/pen/QNPMdm 这是实际的网站：http://sibraza.com/

HTML 代码：

<head>
<link rel="stylesheet" href="filepath/font-awesome-4.6.3%202/css/font-awesome.min.css">
</head>

 <div class="row">
        <div class="icons">
          <ul class="social">
            <li><a href="https://www.linkedin.com/in/syed-raza-374a1a89" class="button social"><i class="fa fa-fw fa-linkedin"></i></a></li>
            <li><a href="https://github.com/sibraza15" class="button social"><i class="fa fa-fw fa-github"></i></a></li>
            <li><a href="http://codepen.io/sibraza/" class="button social"><i class="fa fa-fw fa-codepen"></i></a></li>
          </ul>
        </div>
      </div>

【问题讨论】：

快速思考一下，您是否在浏览器中使用了任何广告拦截功能？
它们在我的本地机器上看起来很好。我怀疑您引用 Font Awesome 库的方式存在问题。您可以考虑使用开发者工具 (F12) 检查任何可能提供更多信息的网络/控制台错误。
我确实使用广告拦截。我认为里昂可能是对的。我在控制台中发现了这个错误：加载资源失败：服务器响应状态为 404（未找到）
如果是 404，那么很可能 Rion 是正确的。然而，一些广告拦截器确实会阻止社交媒体网站的图标，这会导致这种行为。解决文件路径问题后，如果您仍未看到它们，请尝试暂时禁用广告拦截。

标签： html css

【解决方案1】：

会不会是你本地的 font-awesome 版本有问题？请尝试改用CDN 链接。

这里有一个有用的链接，指向 Github 字体真棒存储库上的故障排除页面：Font awesome troubleshooting

编辑：

问题所有者案例中的错误：

<link rel="stylesheet" href="filepath/font-awesome-4.6.3%202/css/font-awesome.min.css">

对问题所有者的“font-awesome.min.css”副本的引用格式错误并且存在文件路径问题。

解决方案：

选项 1：确保您的参考文件路径格式正确并指向“font-awesome.min.css”的有效副本。

选项2：像这样使用CDN提供的版本

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

【讨论】：

【解决方案2】：

我在控制台上看到了：

http://sibraza.com/Users/syedraza/Desktop/SibRaza.com/font-awesome-4.6.3%202/css/font-awesome.min.css Failed to load resource: the server responded with a status of 404 (Not Found)

这意味着您有一些文件路径问题。正如@Wyngaert 建议的那样，尝试使用CDN 而不是托管您自己的版本。

【讨论】：