Bootstrap3 - Glyphicons 不显示在 Chrome 中，仅答案

【问题标题】：Bootstrap3 - Glyphicons are not displayed in Chrome, onlyBootstrap3 - Glyphicons 不显示在 Chrome 中，仅
【发布时间】：2014-01-21 10:47:26
【问题描述】：

奇怪的是，Chrome v31 中没有显示任何 Bootstrap3 字形图标（显示一个小方块）。但是，在 FF v26、Opera v18、Safari v5.1 和 IE v10 中运行良好。此外，在 Android 4.x - Chrome 和 FF 中也能正常工作。

用简单的代码测试：<span class="glyphicon glyphicon-adjust"></span>

请帮忙。非常感谢！

环境：Windows 8.0

【问题讨论】：

右击方块并选择“检查元素”。它应该告诉你很多关于所应用的 CSS 的有趣的事情，以及图标是否被加载。
@PaulTomblin 我这样做了，但是除了 Chrome 在span 之间插入了:before 之外，没有发现任何值得注意的东西。请让我知道如何检查图标是否已加载。我不喜欢 UI，觉得很难……
查看没有被划掉的“background-image” CSS，并查看 url。然后转到网络选项卡（您可能需要重新加载页面）并查看该精灵图像的加载位置。它的状态可能是 304，这意味着它是从缓存中加载的。在这种情况下，请尝试清除缓存。如果是 404 状态或者别的什么，你还有其他问题。
@PaulTomblin 我该睡觉了 :) 这是简单的缓存问题。不管怎样，我学会了调试。再次感谢！请发表您的最后评论作为答案，我会接受。
在看到我选择的正确答案 Wellington Zanelli 的评论（实际上，Glyphicons 是基于字体的）和@Chris Barr 的回答后，我正在修复中，因为清除缓存确实解决了我的问题（正如 Paul Tomblin 在上述评论中所建议的）。

标签： google-chrome browser twitter-bootstrap-3 glyphicons

【解决方案1】：

比起解决你的问题，我更愿意教你如何解决你自己的问题。

右键单击元素并选择“检查元素”。这将打开一个窗口，向您显示有关 html 和应用于它的 CSS 的一些有用信息。
如果是精灵图像（如 Bootstrap 2 中），请查看右侧的 CSS，寻找最顶部（未划线）background-image。查看精灵图像的 url。如果是字形图标（如在 Bootstrap 3 中），请查找 font-family。
转到“网络”选项卡。您可能需要刷新页面才能获得有用的内容。
查找它加载该精灵图像或字体的位置（例如 glyphicons-halflings-regular.woff）。如果它说它的状态为“304”，则表示它是从缓存中加载的。在这种情况下，清除缓存并重新加载页面可能会解决您的问题。
如果不是“304”状态，您可能会遇到网络服务器未提供图像（“404”或类似状态）或由于某种原因无法正确显示的问题。
如果清除缓存不能解决问题，请单击“网络”选项卡上精灵图像或字体的 URL，然后单击“预览”选项卡。您应该看到的是包含您的图标和所有其他图标或该字体中的字母数字字符的块图像。如果这不是您所看到的，那么您的 Web 服务器所提供的服务可能又出现了问题。
如果精灵图像是正确的，那么您的 CSS 可能有问题，您不小心覆盖了精灵的背景位置。再次，返回到 Elements 选项卡并查看生成的 CSS。

【讨论】：

这个答案不适用于 Bootstrap 3。在 Bootstrap 3 中，Glyphicons 是基于字体的，而不是像你说的那样的精灵。
好的，对于那些无法弄清楚如何接受 sprite 建议并进行两个极其微小的更改以使建议适用于 glyphicons 的人，我已经为你详细说明了.
一些字形图标不能与 chrome 一起使用（从 v32.0 开始）。尝试测试几个不同的字形图标，看看是 chrome 问题还是服务器/代码问题。
正如 Chris 所指出的，Bootstrap 中存在一个被许多浏览器（有一段时间）容忍的错误，但在 Chrome 更新后就崩溃了。如果您使用最新版本的 glyphicons，对于许多用户来说，问题将得到解决。或者，用户可以简单地使用 CDN，从而绕过您正在谈论的问题（参见“Get Bootstrap”，CDN 部分：getbootstrap.com/getting-started/#download）
相当不错的答案，即使没有进行编辑，它的行为也符合说明。

【解决方案2】：

我遇到了同样的问题。最简单的解决方案是直接从hiperlink导入CSS，不要下载：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

问题在于 CSS 使用其他文件的其他相对路径。因此，您可以做两件事：
1。下载所有相对路径。
2。您可以简单地使用超链接（更简单）。

【讨论】：

【解决方案3】：

看起来这是 WebKit 中的一个错误，已在此处报告：https://bugs.webkit.org/show_bug.cgi?id=76152

此外，GlyphIcons 的创建者表示他已意识到此问题，并将尝试在下一版本中使用不同的 unicode 值来解决此错误：https://twitter.com/glyphicons/status/423426740128854016

【讨论】：

【解决方案4】：

读者注意：请务必阅读@user2261073's 评论和@Jeff's answer 关于定制器中的错误。这可能是您的问题的原因。

字体文件未正确加载。检查文件是否在预期位置。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

正如 Daniel 所指出的，这也可能是 mimetype 问题。 Chrome 的开发工具在网络标签中显示下载的字体：

【讨论】：

【解决方案5】：

由于文件类型限制，我在 /wp-content 中的 .htaccess 导致了错误。在我将 woff2 添加到允许的文件类型列表后，一切都恢复正常了。

# Protect /Wp-Content/
Order deny,allow
    Deny from all
    <Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
    Allow from all
    </Files>

【讨论】：

【解决方案6】：

我和你有同样的问题：

转到您的 CSS 文件夹。
打开bootstrap.min.css 文件。
在其中搜索字形文字。
你可以找到它的url地址。
您应该将font 文件夹名称更改为fonts。
去享受你的生活吧。 :)

【讨论】：

【解决方案7】：

当字体响应标头为 "Content-Type:text/html; charset=UTF-8" 时，chrome v38+ 将无法显示引导字形图标，如果将响应标头设置为 "Content-Type:application/font-woff"

，它将解决此问题

【讨论】：

【解决方案8】：

您需要下载 bootstrap fonts 文件夹，在 bootstrap.min.css 中您可以找到类似 ../fonts 的 glyphicon 路径，如果您的 fonts 文件夹，您需要将此路径更改为“fonts/”删除 ../在同一个 bootstarp.min.css 内。

享受:)

【讨论】：

【解决方案9】：

我发现在检查 bootstrap.min.css 的 CSS 时，“字体”的目录位置添加了空格，这意味着它正在调用不存在的文件，因为文件名没有这些空格在他们之中。例如，它一直被列为

../fonts/glyphicons - halflings - regular.eot

应该是什么时候

.. /fonts/glyphicons-halflings-regular.eot

删除空格、重新上传 CSS、清除浏览器缓存并重新加载（F5 按钮）后，字形图标终于出现了。在删除多余的空格之前，唯一对我有用的选项是 Gines Hidalgo 给出的选项，他建议通过超链接下载 CSS。但是发现删除多余的空格可以解决不再需要该选项的问题。

【讨论】：

【解决方案10】：

它主要是引导版本控制问题，我只是在 URL 下方添加。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>

【讨论】：

【解决方案11】：

确保您的项目中除了js, css 和其他文件夹之外还有字体文件夹。

如果字体文件夹在项目中并且the bootstrap.min.css 文件中的路径是这样的../fonts/glyphicons 即字体文件夹不在css 文件夹中，那么一切都会正常工作。谢谢。

【讨论】：

【解决方案12】：

如果有帮助，使用 bootstrap.css 代替 bootstrap.min.css 为我解决了这个问题。

【讨论】：

你为什么不使用 font awesome fortawesome.github.io/Font-Awesome 为引导程序制作