Bootstrap3 - Glyphicons不会仅显示在Chrome中

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

我宁愿教你如何解决自己的问题,而不是解决你的问题.

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

Answer 2

我有同样的问题.最简单的解决方案是直接从hiperlink导入CSS,不要下载它:

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

问题是CSS使用其他文件的相对路径.因此,您可以做两件事:
1.下载所有相对路径.
2.您可以简单地使用超链接(更简单).