Bootstrap3 - Glyphicons在Chrome中无法显示，其他浏览器正常

Question

Bootstrap3 - Glyphicons在Chrome中无法显示，其他浏览器正常

google-chromebrowsertwitter-bootstrap-3glyphicons

9

奇怪的是，在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

- lupchiazoem

右键单击方块，选择“检查元素”。它应该会告诉你有关应用的CSS以及图标是否已加载的许多有趣信息。 - Paul Tomblin

@PaulTomblin 我已经这样做了，但是除了Chrome在span之间插入了:before之外，没有发现任何明显的东西。请告诉我如何检查图标是否已加载。我不擅长UI，感觉有些困难... - lupchiazoem

1

请查找未被划掉的“background-image” CSS，并查看其URL。然后转到网络选项卡（您可能需要重新加载页面），查看精灵图像从哪里加载。很有可能它的状态是304，这意味着它是从缓存中加载的。在这种情况下，请尝试清除缓存。如果状态为404或其他内容，则存在其他问题。 - Paul Tomblin

在看到我所选择的正确答案被投下负票、Wellington Zanelli的评论（确实，Glyphicons是基于字体的）和@Chris Barr的回答后，我陷入了困境，因为清除缓存确实解决了我的问题（正如Paul Tomblin在上面的评论中建议的那样）。 - lupchiazoem

别担心。我的建议仍然适用。对于图标字体而不是精灵图，建议略有不同，但任何聪明的人都应该能够理解其中的区别。 - Paul Tomblin

显示剩余2条评论

12个回答

11

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

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

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

The problem is that CSS uses relative paths to other files. Therefore, you can do two things:
1. Download all the related paths.
2. You can simply use hyperlinks (easier).

- Ginés Hidalgo

1

注意：读者一定要阅读@user2261073的评论和@Jeff的答案，涉及到自定义器中的一个错误，可能是你问题的原因。

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

@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的开发者工具在网络选项卡中显示下载的字体：

- Shiv Singh

1

我和你有同样的问题:

进入你的CSS文件夹。
打开bootstrap.min.css文件。
在里面搜索glyphicon文本。
你可以找到它的URL地址。
你应该将font文件夹名称改为fonts。
去享受你的生活吧。 :)

- mohsen Irani

1

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

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

- FiniteLooper

1

因为文件类型限制，我在/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>

- Browsergirl

0

我发现在检查bootstrap.min.css的CSS时，"fonts"目录位置添加了空格，这意味着它调用了不存在的文件，因为文件名中没有这些空格。例如，它列出了每一个：

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

当它应该是：

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

一旦我删除了空格，重新上传了CSS，清除了浏览器缓存，并重新加载（F5按钮），glyphicons终于显示出来了。在删除额外的空格之前，唯一有效的选项是Gines Hidalgo提供的通过超链接下载CSS。但是，发现删除额外的空格可以解决问题，这个选项就不再必要了。

- Eric Patterson

0

这主要是Bootstrap版本问题，我只是添加了下面的URL。

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

- mazhar 124

0

当字体响应头为"Content-Type:text/html; charset=UTF-8"时，Chrome v38+将无法显示Bootstrap图标，如果将响应头设置为"Content-Type:application/font-woff"，则可以解决此问题。

- Jack

0

确保在项目中除了 js, css 和其他文件夹之外，还有一个名为 fonts 的文件夹。

如果在项目中存在 fonts 文件夹，并且在 bootstrap.min.css 文件中的路径如下：../fonts/glyphicons，即 fonts 文件夹不在 css 文件夹中，则一切都将正常工作。谢谢。

- Bukenya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Tomblin · Accepted Answer

我更喜欢教你如何解决自己的问题，而不是代替你解决问题。

右键单击该元素，选择“检查元素”。这将打开一个窗口，显示有关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。