Windows中的字体很棒，缺少一个图标

Question

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

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

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

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

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

Answer 1

您在Linux与Windows计算机上提供较旧版本的字体真棒字体文件。此图标（fa-cart-plus）仅在v4.3（http://fortawesome.github.io/Font-Awesome/icon/cart-plus/）中开始提供。确保两台机器都提供了vontawesome 4.3字体文件，并且它可以正常工作。

CDN总是有用，但它不会向您显示问题的根本原因。

Answer 2

您可以在网页中使用此CSS

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

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主页一切都很好，只是不是可下载的包。

基本上，请稍等一下，我确定他们会对它进行排序，即使专业人员会犯错误 - 使用与工作示例相同的来源，直到下载包得到修复，如果您不顾一切地使用它。