Windows 字体真棒中缺少一个图标

Question

我目前正在使用 Windows 7 VM 在 IE11 中测试我的网站。我的网站使用很棒的字体和字形图标。除了一个图标外，所有图标都按预期加载。

<button type="submit">
    <i class="fa fa-cart-plus fa-2x"></i>
</button>

在 Firefox 中测试，在我的 Linux Mint 机器中 Chrome 测试，所有图标都正确呈现。但是 Windows 中的 IE 和 Firefox 都将这个单个图标显示为一个框。

我注意到 Linux 中使用的是 .woff2 文件，而 Windows 中使用的是 .woff 版本。 Font Awesome CSS 和字体在本地提供，而不是来自 CDN。这会有什么不同吗？这个丢失的图标在 font awesome's website.

上正确显示

我在 Stack Overflow 中找到了一些类似的答案，大多数都是旧的，我无法解决这个问题，因为我什至不知道从哪里开始。我该如何修复这个丢失的图标？

Answer 1

您可以在您的网页中使用此CSS

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

Answer 2

您在 Linux 与您的 Windows 机器上提供旧版本的 font awesome 字体文件。此图标 (fa-cart-plus) 仅从 v4.3 (http://fortawesome.github.io/Font-Awesome/icon/cart-plus/) 开始可用。确保两台机器都提供 fontawesome 4.3 字体文件，它会正常工作。

CDN 总是有用的，但它不会告诉你问题的根本原因。

Answer 3

在本地环境中 Chrome 也有这个问题（可能不止于此，但懒得去全面测试）- 我怀疑最新版本已经搞砸了。

我已经使用下面的 fa-stack 方法构建了一个版本，只需要一点 css 来定位但工作正常：

HTML

<a role="button" class="btn btn-primary">
<span class="fa-stack">
<i class="fa fa-shopping-cart fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-primary"></i>
</span>&nbsp;New</a>

CSS

.fa-primary{
position: relative;
color: #1a9dff;
font-size: 0.5em !important;
top:-4px;
left:2px !important;
}

编辑：我不得不调整 css 以便与 FontAwesome 的 CDN 版本一起使用 - 进一步怀疑下载包和 CDN 不匹配

See this codepen example

这将在购物车图标上叠加一个您选择颜色的加号图标。（编辑：抱歉我的缩进不好，第一次回答！）

我要指出几个月前 Bootstrap 发生了类似的事情，我将核心文件从 3.1.1 更新到 3.3.4（或其他），它完全破坏了我的布局，虽然使用 bootstrap 主页上使用的 CDN 一切都很好，只是不是可下载的包。

基本上，稍等片刻，我相信他们会对其进行排序，即使是专业人士也会犯错 - 如果您迫切希望使用，请使用与工作示例相同的源，直到下载包得到修复它。

Windows 字体真棒中缺少一个图标

One icon is missing in font awesome in Windows

css

fonts

font-awesome