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

4

12 回答 12

33

Rather than fix your problem, I prefer to teach you how to fix your own problem.

  1. Right click on the element and choose "Inspect Element". That will bring up a window showing you some useful information about the html and the CSS that's applied to it.
  2. If it's a sprite image (as in Bootstrap 2), look at the CSS on the right hand side, looking for the top-most (un-crossed-out) background-image. See the url for the sprite image. If it's a glyphicon (as in Bootstrap 3), look for the font-family instead.
  3. Go to the Network tab. You may need to refresh the page to get useful stuff there.
  4. Look for where it loaded that sprite image or font (e.g. glyphicons-halflings-regular.woff). If it says it has a status of "304", that means it was loaded from the cache. In that case, clearing the cache and reloading the page might solve your problem.
  5. If it wasn't a "304" status, you might have a problem where the web server isn't serving up the image (a "404" or similar status) or it's not coming up correctly for some reason.
  6. If clearing the cache didn't solve the problem, click on the URL for the sprite image or font on the Network tab, and then click on the "Preview" tab. What you should be seeing is a block image that contains your icon and all the other icons, or the alphanumeric characters in that font. If this isn't what you're seeing, again there is probably something wrong with what your web server is serving up.
  7. If the sprite image is correct, then there is probably something wrong with your CSS where you're accidentally overriding the background-position for the sprite. Again, go back to your Elements tab and look at the CSS that's generated.
于 2014-01-03T18:48:17.183 回答
11

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

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

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

于 2015-05-01T19:01:11.713 回答
1

Note to readers: be sure to read @user2261073's comment and @Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.

The font file isn't being loaded correctly. Check if the files are in their expected location.

@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');
}

As indicated by Daniel, it might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:

于 2014-05-27T11:47:09.997 回答
1

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

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

于 2014-01-21T17:15:57.870 回答
1

我和你有同样的问题：

  1. 转到您的 CSS 文件夹。
  2. 打开bootstrap.min.css文件。
  3. 在其中搜索字形文字。
  4. 你可以找到它的url地址。
  5. 您应该将font文件夹名称更改为fonts.
  6. 去享受你的生活吧。:)
于 2015-10-28T12:31:46.747 回答
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>
于 2015-09-02T16:09:38.297 回答
0

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

于 2014-10-10T01:53:21.027 回答
0

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

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

应该是什么时候

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

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

于 2017-07-11T19:34:01.377 回答
0

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

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
于 2018-05-24T06:52:42.257 回答
0

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

请享用 ：）

于 2016-02-27T05:38:14.217 回答
0

确保在项目中除了 thejs, css和其他之外还有 fonts 文件夹。

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

于 2019-05-30T13:17:40.783 回答
-1

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

于 2014-03-05T09:40:07.370 回答