logo标签列表

Twitter Bootstrap 3 图标显示为正方形

twitter-bootstrap
34

字体文件放置正确，HTML代码使用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

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

你能提供一个fiddle吗？ - RienNeVaPlu͢s
你使用的是哪个浏览器？ - Daniel A. White
请在不同的浏览器中检查，字体文件是否正确加载，同时确保 MIME 类型设置正确。 - Siddharth Pandey
2
Chrome显示一个正方形，而FF显示一个奇怪的代码。 - Daniel Faria
我接手了某人的代码库，对我来说问题在于他们使用<i class="glyphicon glyphicon-star"></i>而不是使用span。 - Braden Brown
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
10

大家好，问题出在字体文件损坏了。奇怪的是，我尝试从不同设备下载Bootstrap三次，每次都遇到了同样的问题。 最奇怪的是，我研究了好几天，似乎没有人遇到过同样的问题。 所以就是这样了！

我遇到了同样的问题。你最终是如何获得正确的文件的？我也已经下载了很多次，但似乎它们全部都是“损坏”的。 - Brian
1
@Brian 我也遇到了同样的问题，我从这里的链接中wget了文件：https://dev59.com/5mMl5IYBdhLWcg3woYPa 根据上面的答案，md5sum看起来都没问题。 - Cesc
我也遇到了这个问题，但似乎只在Chrome中存在。出奇的是，在IE中它运行良好。 - Steven
8
在您的bootstrap.css文件中，尝试在`.glyphicon font-family`中添加`!important`来修改字体。
.glyphicon {
   font-family:'Glyphicons Halflings' !important;
   // more css comes along here
}

其他CSS可能会导致字形图标的字体发生冲突。

这对我有用，使用Bootstrap 3。 - Qasim
3
这对我有用：
在bootstrap.css中，这是字体的链接。（第2386行或者搜索face）
@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');
}
虽然这可以解决问题，但编辑源文件是不好的做法，以后更新bootstrap时可能会出现问题。也许另一个答案更可取。 - Subtletree
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'
有一个名为css的文件夹和一个名为fonts的文件夹。我尝试将字体文件放在css文件夹中与css文件一起，但仍然显示一个方块。 - Daniel Faria
@DanielFaria 请再次检查我的答案。 - Siddharth Pandey
结构完全相同 - Daniel Faria
@DanielFaria 确保您没有任何控制台错误，例如找不到任何CSS、字体文件。您使用的是哪个浏览器？您是否尝试在其他浏览器中进行测试？ - Siddharth Pandey
@DanielFaria 你好，有什么问题吗？你尝试在其他浏览器中打开了吗？ - Siddharth Pandey
1
0

对我来说，这是

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

而不是

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

已更改，现在完美运行 :)

0

检查您的根目录中是否有“font”目录，因为大多数Bootstrap CSS都指向必须在根目录或主目录文件夹中的某个文件夹中组合的glyphicon字体。

0
对我来说，这是一个权限问题。字体没有适当的权限。
0
问题可能是因为您下载了Glyphicons的免费版本，该版本仅包括基本和社交图标。如果您使用免费版本，则某些图标根本不存在，将呈现正方形。
我切换到使用CDN并在头部链接，一切都正常了！
CDN：https://www.bootstrapcdn.com/
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接