Twitter Bootstrap 3图标显示一个正方形


Twitter Bootstrap 3 icon displaying a square

字体文件在正确的位置，并且html代码使用字符集utf-8。

那是代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta chaset="utf-8">
    Teste icone
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>

    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-star"></span> Star
    </button>

</body>
</html>

那就是文件结构：

1
2
3
4
5
-css
   *bootstrap.min.css
-fonts
    *all font files here
*index.html

奇怪的是，当我进行调试时，所有字体文件均已正确加载

相关讨论

尝试重新下载字体，可能已损坏。

检查MD5

1
2
3
4
MD5 (glyphicons-halflings-regular.eot) = 2469ccfe446daa49d5c1446732d1436d
MD5 (glyphicons-halflings-regular.svg) = 3b31e1de93290779334c84c9b07c6eed
MD5 (glyphicons-halflings-regular.ttf) = aa9c7490c2fd52cb96c729753cc4f2d5
MD5 (glyphicons-halflings-regular.woff) = 7c4cbe928205c888831ba76548563ca3

伙计们，问题在于字体文件已损坏，奇怪的是我尝试从不同的设备下载Bootstrap 3次，而所有这些我都遇到了同样的问题。
最奇怪的是，我研究了很多天，显然没有人遇到同样的问题。
所以..就这样！

相关讨论

在bootstrap.css中尝试在.glyphicon字体家族中添加！important ..

1
2
3
4
.glyphicon {
   font-family:'Glyphicons Halflings' !important;
   // more css comes along here
}

其他CSS可能会导致冲突，从而更改字形字体的字体。

这对我有用：

在bootstrap.css中，这是字体的链接。 (第2386行或仅搜索面部)

1
2
3
4
5
6
7
8
@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');
}

在每个链接对我有用之前删除" .."

例如

1
2
3
4
5
6
7
8
@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');
}
相关讨论

请参阅Stijn答案：

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.

我刚尝试删除tb3网站上图标的字体，它显示为正方形。
如果字体文件夹包含所有文件，请确保您的字体文件夹与css文件夹处于同一级别。

结构应为：

1
2
3
4
5
6
7
8
9
10
11
- css
  -bootstrap-theme.css
  -bootstrap-theme.min.css
  -bootstrap.css
  -bootstrap.min.css

-fonts
  -glyphicons-halflings-regular.eot
  -glyphicons-halflings-regular.svg
  -glyphicons-halflings-regular.ttf
  -glyphicons-halflings-regular.woff

css代码：font-family: 'Glyphicons Halflings'

相关讨论

我的fonts文件夹只是在错误的目录中，它必须向上一级。

该问题可能是因为您下载了Glyphicons的免费版本，该版本仅包含bacic和社交图标。如果使用免费版本，则某些图标将根本不存在，并且会渲染正方形。

我转而使用CDN并链接到我的脑袋，一切正常！

CDN：https：//www.bootstrapcdn.com/

检查" font"目录在您的根文件夹中是否可用，因为大多数引导CSS都指向glyphicon字体，这些字体必须合并在根文件夹或主文件夹目录中的某个文件夹中。

对我来说，这是一个许可问题。字体没有适当的权限

对我来说是

1
src: font-url("../fonts/glyphicons-halflings-regular.eot");

而不是

1
src: url("../fonts/glyphicons-halflings-regular.eot");

已更改，并且可以完美运行：)

我遇到这个问题，经过非常仔细的搜索：

  • 字形图标是免费的，仅用于CDN。
  • 除了使用字形图标，您还可以使用免费的超赞图标。
    有关更多信息，请参见http://fontawesome.io/3.2.1/get-started/