twitter-bootstrap 显示正方形的 Twitter Bootstrap 3 图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18603355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap 3 icon displaying a square
提问by Daniel Faria
Font files are in the right place and html code is with charset utf-8.
字体文件在正确的位置，html 代码使用字符集 utf-8。
Thats the code:
这就是代码：
<!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>
and thats the file structure:
这就是文件结构：
-css
*bootstrap.min.css
-fonts
*all font files here
*index.html
The strange is that when i look on debug all font files are loaded correctly
奇怪的是，当我查看调试时，所有字体文件都正确加载
采纳答案by Daniel Faria
Guys the issue was font files were corrupteds, the weird is that I've tried download bootstrap 3 times from differents devices and all of then I had the same issue. The most strange is that I research a lot for days and apparently nobody had the same issue. So.. thats it!
伙计们，问题是字体文件已损坏，奇怪的是我已经尝试从不同的设备下载引导程序 3 次，然后我遇到了同样的问题。最奇怪的是，我研究了很多天，显然没有人遇到同样的问题。就是这样了！
回答by Diego
Try re-downloading the fonts, may be corrupt.
尝试重新下载字体，可能已损坏。
Check the MD5
检查 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
回答by Hunyo Silaw
in your bootstrap.css try to add !important in .glyphicon font-family..
在您的 bootstrap.css 中尝试在 .glyphicon font-family 中添加 !important..
.glyphicon {
font-family:'Glyphicons Halflings' !important;
// more css comes along here
}
other css might cause conflict to change the glyphicons font-family.
其他 css 可能会导致冲突以更改 glyphicons 字体系列。
回答by Subtletree
This worked for me:
这对我有用：
In bootstrap.css this is the link to the fonts. (Line 2386 or just search for face)
在 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');
}
Removing the '..' before each link worked for me
在每个链接对我有用之前删除“..”
e.g
例如
@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');
}
回答by paaacman
Note to readers: be sure to read @user2261073's commentand @Jeff's answerconcerning a bug in the customizer. It's likely the cause of your problem.
读者注意事项：请务必阅读@user2261073 的评论和@Jeff关于定制器中错误的回答。这很可能是您的问题的原因。
回答by Siddharth Pandey
I have just tried removing the font for a icon on tb3 site and it displays as a square. Make sure you have the font folder in the same level as your css folder, provided font folder has all the files.
我刚刚尝试删除 tb3 站点上图标的字体，它显示为一个正方形。确保您的字体文件夹与 css 文件夹位于同一级别，前提是字体文件夹包含所有文件。
the structure should be:
结构应该是：
- 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 code: font-family: 'Glyphicons Halflings'
css代码： font-family: 'Glyphicons Halflings'
回答by MyMomSaysIamSpecial
For me it was
对我来说是
src: font-url("../fonts/glyphicons-halflings-regular.eot");
instead of
代替
src: url("../fonts/glyphicons-halflings-regular.eot");
changed, and works perfectly :)
改变了，并且完美运行:)
回答by Utkarsh Patil
Check if 'font' directory is available in your root folder, as most of the bootstrap CSS directs to glyphicon fonts which must be clubbed in some folder within the root folder or home folder directory.
检查根文件夹中的“字体”目录是否可用，因为大多数引导 CSS 都指向 glyphicon 字体，这些字体必须放在根文件夹或主文件夹目录中的某个文件夹中。
回答by RoadkillMike
The problem is likely because you have downloaded the free version of Glyphicons, which onlyincludes bacic and social icons. If you use the free version, some icons are simply not there, and will render the square.
问题很可能是因为您下载了 Glyphicons 的免费版本，该版本仅包含基本图标和社交图标。如果您使用免费版本，则某些图标根本不存在，并且会呈现正方形。
I switched to using a CDN and linking in my head and everything worked!
我改用 CDN 并在脑海中进行链接，一切正常！
回答by llewan
For me it was a permission problem. The fonts didnt have the appropriate permissions
对我来说，这是一个许可问题。字体没有适当的权限
