引导程序3-Glyphicons不显示在Chrome中,只是



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

与其解决你的问题,我更愿意教你如何解决自己的问题。

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

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

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

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

这似乎是WebKit中的一个错误,已在此处报告:https://bugs.webkit.org/show_bug.cgi?id=76152

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

读者注意:一定要阅读@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所指出的,这也可能是一个模仿型的问题。Chrome的开发工具在网络选项卡中显示下载的字体:

/wp内容中的My.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>

我遇到了和你一样的问题:

  1. 转到您的CSS文件夹
  2. 打开bootstrap.min.css文件
  3. 在其中搜索字形文本
  4. 你可以找到它的网址
  5. 您应该将font文件夹名称更改为fonts
  6. 去享受你的生活吧

当字体响应标头为"内容类型:text/html;charset=UTF-8">时,chrome v38+将无法显示引导程序图示符,如果将响应标头设置为"内容类型:application/font woff">,它将解决此问题

您需要下载bootstrap.min.css文件夹,在bootstrap.mini.css中可以找到如下路径/字形图标的字体,您需要将此路径更改为"字体/"删除../如果您的字体文件夹在相同的bootstarp.min.css.中

享受:)

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

../字体/字形图标-半身像-regular.eot

什么时候应该是

/字体/字形-hallings-regular.eot

一旦我删除了空格,重新上传了CSS,清除了浏览器缓存,并重新加载(F5按钮),字形图标终于出现了。在删除多余的空格之前,唯一对我有效的其他选择是Gines Hidalgo提供的,他建议通过超链接下载CSS。但随着发现移除额外空间可以解决问题,该选项不再必要。

它主要是引导程序版本控制问题,我只是在URL下面添加了它。

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

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

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

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

相关内容

最新更新