twitter-bootstrap - 一些 Font Awesome 图标不显示

Question

我可以看到 icon-screenshot、icon-map-marker 渲染得很好，但是在使用 icon-paper-clip 或 icon-group 或 icon-link 时什么都看不到......可能有什么问题？这里有人遇到过同样的问题吗？

Answer 1

基于official troubleshooting guide这些是你应该检查的事情:

一般

您的系统上没有安装旧版本的 Font Awesome(它可能具有优先权)；

[如果您从自己的服务器提供 Font Awesome] 您的 font-awesome.css 文件和您的/fonts 文件夹都是最新的；

[如果您从 CDN 提供 Font Awesome] 您的 css 链接是最新的；

您没有使用插件/扩展加载旧版/修改版的 Font Awesome；

您正在使用有效的 HTML5 模板；

您的浏览器的开发控制台显示您正在加载正确的字体文件；

您的浏览器扩展没有阻止网络字体(noscript、adblockplus 等)。

IE 特定

Internet Explorer 兼容模式可能会导致一些问题。通过添加到您的头部来禁用它:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

如果您使用的是 IE8，则需要添加 html5.js 脚本，例如:
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->

FontAwesome 与 ie7-js 不兼容。

除非字体设置为可安装嵌入模式，否则 Internet Explorer 会生成错误。 More info .

WordPress 特定

Wordpress 自动添加 <br>在行尾添加标签，这将破坏图标堆栈。请将您的 html 放在一行中或添加到您的样式表中:
.fa-stack br { display: none }