34

字体文件位于正确的位置，html 代码使用 charset utf-8。

那是代码：

<!DOCTYPE html>
<html>
<head>
    <meta chaset="utf-8">
    <title>Teste icone</title>
    <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>

这就是文件结构：

-css
   *bootstrap.min.css
-fonts
    *all font files here
*index.html

奇怪的是，当我查看调试时，所有字体文件都已正确加载

4

12 回答 12

16

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

检查MD5

MD5 (glyphicons-halflings-regular.eot) = 2469ccfe446daa49d5c1446732d1436d
MD5 (glyphicons-halflings-regular.svg) = 3b31e1de93290779334c84c9b07c6eed
MD5 (glyphicons-halflings-regular.ttf) = aa9c7490c2fd52cb96c729753cc4f2d5
MD5 (glyphicons-halflings-regular.woff) = 7c4cbe928205c888831ba76548563ca3
于 2013-09-13T02:55:40.987 回答
10

伙计们，问题是字体文件已损坏，奇怪的是我已经尝试从不同的设备下载引导程序 3 次，然后我都遇到了同样的问题。最奇怪的是，我研究了好几天，显然没有人遇到同样的问题。就是这样了！

于 2013-09-18T22:45:33.237 回答
7

在您的 bootstrap.css 中尝试在 .glyphicon font-family 中添加 !important ..

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

其他 css 可能会导致更改字形字体系列的冲突。

于 2014-03-21T18:27:41.490 回答
3

这对我有用：

在 bootstrap.css 中，这是字体的链接。（第 2386 行或只搜索人脸）

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

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

例如

@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');
}
于 2013-09-04T07:34:56.810 回答
1

见 Stijn 回答：

读者注意：请务必阅读@user2261073 的评论 和@Jeff 对定制器中的错误的回答。这很可能是您的问题的原因。

于 2013-11-08T10:27:16.143 回答
1

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

结构应该是：

- 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'

于 2013-09-04T00:15:29.607 回答
0

检查根文件夹中是否有“字体”目录，因为大多数引导 CSS 都指向字形字体，这些字体必须放在根文件夹或主文件夹目录中的某个文件夹中。

于 2015-04-21T09:11:36.757 回答
0

对我来说是

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

代替

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

改变了，并且完美地工作:)

于 2013-10-27T20:18:52.013 回答
0

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

于 2013-11-13T14:56:26.853 回答
0

问题可能是因为您下载了 Glyphicons 的免费版本，其中仅包含基本和社交图标。如果您使用免费版本，一些图标根本不存在，并且会呈现正方形。

我改用 CDN 并在脑海中进行链接，一切正常！

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

于 2016-07-07T09:52:53.413 回答
0

我的字体文件夹只是在错误的目录中，它必须上一层。

于 2016-11-25T21:10:44.933 回答
-3

我有这个问题，经过非常搜索：

  1. glyph-icons 是免费的，仅供 CDN 使用。
  2. 您可以使用免费的 Awesome 图标，而不是使用 glyph-icons。http://fontawesome.io/3.2.1/get-started/中的更多信息
于 2016-10-09T19:35:54.997 回答