Question

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

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

请帮忙。非常感谢！

环境：Windows 8.0

Answer 1

我宁愿教你如何修复自己的问题，而不是解决你的问题。

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

Answer 2

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

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

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

Answer 3

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

另外，GlyphIcons的创建者说他知道这个问题，并会尝试在下一个版本中使用不同的unicode值来解决这个问题：https://twitter.com/glyphicons/status/423426740128854016

Answer 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的开发工具会在网络标签中显示已下载的字体：

Answer 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>

Answer 6

我和你有同样的问题：

转到CSS文件夹。
打开bootstrap.min.css文件。
在其中搜索glyphicon文本。
你可以找到它的网址。
您应将font文件夹名称更改为fonts。
去享受你的生活。：）

Answer 7

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

，它将解决此问题

Answer 8

你需要下载bootstrap fonts文件夹，在你的bootstrap.min.css中你可以找到像glyphicon的../fonts这样的路径，你需要将这个路径更改为“fonts /”删除../如果你的字体文件夹在同一个bootstarp.min.css中。

享受：）

Answer 9

我发现在检查bootstrap.min.css的CSS时，＆＃34; fonts＆＃34;的目录位置添加了空格，这意味着它要求的文件不存在，因为文件名中没有这些空格。例如，它一直列在每一个

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

应该是什么时候

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

删除空格后，重新上传CSS，清除浏览器缓存，然后重新加载（F5按钮）最终显示的字形。在删除额外空格之前，唯一对我有用的选项是由Gines Hidalgo提供的，他建议通过超链接下载CSS。但随着发现删除额外的空格修复了不再需要选项的问题。

Answer 10

它主要是bootstrap版本控制问题，我只是添加了以下网址。

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

Answer 11

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

如果fonts文件夹在项目中，并且the bootstrap.min.css文件中的路径是这样的../fonts/glyphicons，即fonts文件夹不在css文件夹中，则一切正常。谢谢。

Answer 12

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

Bootstrap3 - Glyphicons不会仅显示在Chrome中

12 个答案: