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

【问题标题】：One icon is missing in font awesome in WindowsWindows 中的字体真棒中缺少一个图标
【发布时间】：2023-04-10 11:01:01
【问题描述】：

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

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

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

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

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

【问题讨论】：

您是否尝试过指向 CDN 以查看是否可以解决问题？
我做到了，我的它没有解决问题，它跳过它，我宁愿提供本地字体。

标签： css fonts font-awesome

【解决方案1】：

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 以与 CDN 版本的 FontAwesome 一起使用 - 进一步怀疑下载包和 CDN 不匹配

See this codepen example

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

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

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

【讨论】：

我喜欢你的想法。如果您愿意添加一个最低限度的工作示例来显示您的图标，我会接受这个答案。
Gah - 我应该在工作：P 让我在答案中添加一个 Bootply
不是居中的呵呵。但它会做。 :) 这个解决方案的好处是它允许您按照自己的方式制作添加按钮。我有点不喜欢默认的样子。此外，您的示例无法正常工作，因为它缺少很棒的字体。我只是想让答案完整:) 谢谢
别担心，我一直想使用 fa-stack 方法，只是直到现在才找到借口，因为我想要和你一样的图标，哈哈

【解决方案2】：

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

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

【讨论】：

使用 CDN 是可行的，但它的缺点是必须额外请求外部样式表。我使用 bower 安装了 fontawesome，版本是 4.3.0，现在是最新版本。我会尝试从源代码下载所有内容。
但是你是对的。 4.3 更新中的所有图标都无法在此处使用。

【解决方案3】：

你可以在你的网页中使用这个CSS

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

【讨论】：