Bootstrap glyphicons显示错误的图标

Question

我在开发我的网站时看到过这种情况，有时我的字形无法正确呈现并显示不同的图标。我最近得到了一些关于我的购物车和搜索按钮的报告，显示为锤子和嘴唇。我正在使用bootstrap v3.3.4并使用绝对路径将字体存储在我的服务器上。我在FireFox中看到过这种情况，并在Safari中获得了移动报告。任何人都有这个问题，或者想知道为什么会这样？

我要补充一点，当我记得看到这个时，我刷新了页面或清除了缓存并解决了问题。但我的客户想要一个更好的答案，而不是只是刷新页面。

Answer 1

我正在处理一个与我正在进行的项目有类似的问题。我的理解是平台拥有的图标/表情符号正在取代你自己的优先权，因为它们共享相同的名称。作为一种解决方法，我用一个模糊的前缀改变了我的命名约定。从那以后一直没有麻烦。如果你像我一样并且不确定如何解决这个问题我使用Fontastic Me Font Icon Maker作为起点。希望这会有所帮助：）

Answer 2

这是我的解决方案： 在_variables.scss（或css）中找到带有图标字体路径的行：

$ icon-font-path：if（$ bootstrap-sass-asset-helper，“bootstrap /”，“ ../ ../ fonts / bootstrap /”）！default; < / p>

在我的情况下，问题出现在字体/ bootstrap的错误路径上（字形符号在这里）。要解决问题，只需从那里删除一个“../”。你的代码应该是这样的：

$ icon-font-path：if（$ bootstrap-sass-asset-helper，“bootstrap /”，“ ../ fonts / bootstrap / ”）！default;

希望它有所帮助。

Answer 3

（将此文件提供给将来搜索的任何人，突出显示Tony发表的the link中对原始问题的评论中的答案。）

如果您在iOS上使用广告拦截器，您会看到此问题 - 表情符号替换字形图（例如猴脸替换日历）。除了禁用广告拦截器之外，我没有其他解决方案。

BTW类似的事情发生在font-awesome上，但没有显示表情符号，图标就不会出现了。这不是很好但绝对更好！

Answer 4

今天，我的联合创始人提醒开发团队的其他成员，她在我们的生产网络应用程序中看到了猴子表情符号。那天已经很晚了，我们正在推送的iOS应用程序更新让我们非常疲惫（更不用说几周内没有人触摸过Web应用程序代码），因此我们所有人都非常相信她完全失去了理智。

尽管如此，我们还是花了40分钟试图在她和我们的iPhone上重现它。我们以私人浏览模式打开了该页面，打开/关闭了WiFi，并在页面之前访问了她在页面之前访问过的页面，以防标签之间泄漏某种内存。没有。显然，这全是猴子的事。

但是它一直困扰着我。因此，我决定尝试最后一件事。作为我们iOS应用程序更新的一部分，我们一直在使用Network Link Conditioner的网络条件非常差的情况下使用我们的应用程序。她的电话是我们使用过的测试设备之一，因此我检查了她的设置，发现有人忘记了将其关闭。我决定尝试将速度从3G降低到Edge。我重新加载页面，他在那里。

我们的glyphicon-calendar曾经所在的地方。

?盯着我。