twitter-bootstrap 为什么我的 Bootstrap 3 按钮图标不显示?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18893597/
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
Why won't my Bootstrap 3 button icons display?
提问by Fizzix
Basically, I am trying to display around 5 buttons, and I require 4 of them to have icons.
基本上,我试图显示大约 5 个按钮,并且我需要其中 4 个具有图标。
I have included the following link within the headof my document
我在head我的文档中包含了以下链接
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
Although, the buttons are just showing with the correct style, and no icon next to them.
虽然,按钮只是以正确的样式显示,并且旁边没有图标。
Here is the code for my buttons
这是我的按钮的代码
<a href="#" class="btn btn-info btn-large"><i class="icon-white icon-home"></i> Home</a>
<a href="#" class="btn btn-info btn-large"><i class="icon-white icon-info-sign"></i> About</a>
<a href="#" class="btn btn-info btn-large">FAQ <i class="icon-white icon-question-sign"></i></a>
<a href="#" class="btn btn-info btn-large">Learn <i class="icon-white icon-check"></i></a>
Within my bootstrap folder, I have 3 other folders named css, fontsand js. There were all taken directly from the Bootstrap download.
在我的 bootstrap 文件夹中,我还有 3 个其他文件夹,分别名为css,fonts和js. 所有这些都是直接从 Bootstrap 下载中获取的。
I have tried also including some javascript files and other css files, but there was no change.
我也试过包括一些 javascript 文件和其他 css 文件,但没有任何变化。
回答by adrift
Bootstrap 3 has changed the icons to be in font format using the Glyphicons Halflingsset.
Bootstrap 3 已使用Glyphicons Halflings集将图标更改为字体格式。
You now need to use a base class of glyphiconfollowed by the class of the specific glyphicon you want to use (see the link for a complete list):
您现在需要使用一个基类,glyphicon后跟您要使用的特定字形的类(请参阅完整列表的链接):
<span class="glyphicon glyphicon-cog"></span>
回答by devo
You should use span instead of i,
你应该使用 span 而不是 i,
<span class="glyphicon glyphicon-home"></span>

