Question

字体文件位于正确的位置，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

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

Answer 1

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

检查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

Answer 2

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

Answer 3

你的bootstrap.css中的

尝试在.glyphicon font-family中添加！important。

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

其他css可能会导致冲突更改glyphicons font-family。

Answer 4

这对我有用：

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

Answer 5

我刚尝试删除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'

Answer 6

See Stijn answer:

读者注意：请务必阅读@user2261073's comment 和@Jeff's answer 关于定制器中的错误。它可能是你的原因问题

Answer 7

对我而言

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

而不是

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

改变了，并且完美地工作：）

Answer 8

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

Answer 9

检查＆＃39; font＆＃39;目录在根文件夹中可用，因为大多数引导程序CSS都指向glyphicon字体，这些字体必须在根文件夹或主文件夹目录中的某个文件夹中进行分组。

Answer 10

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

我转而使用CDN并在脑海中连接，一切正常！

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

Answer 11

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

Answer 12

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

glyph-icons只供CDN使用。
而不是使用字形图标，你可以使用免费的真棒图标。 http://fontawesome.io/3.2.1/get-started/

Twitter Bootstrap 3图标显示正方形

12 个答案: