为什么我的Bootstrap 3按钮图标不显示?

时间:2013-09-19 11:38:04

标签: css twitter-bootstrap twitter-bootstrap-3

基本上,我试图显示大约5个按钮,我需要其中4个按钮。

我在我的文档的head中包含了以下链接

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

虽然按钮只显示正确的样式,但旁边没有图标。

以下是我的按钮的代码

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

在我的bootstrap文件夹中,我有3个名为cssfontsjs的其他文件夹。所有这些都直接来自Bootstrap下载。

我还尝试过包含一些javascript文件和其他css文件,但没有任何变化。

2 个答案:

答案 0 :(得分:18)

Bootstrap 3使用Glyphicons Halflings设置将图标更改为字体格式。

您现在需要使用glyphicon的基类,然后使用您要使用的特定glyphicon的类(请参阅链接以获取完整列表):

<span class="glyphicon glyphicon-cog"></span>

答案 1 :(得分:3)

您应该使用span而不是i,

<span class="glyphicon glyphicon-home"></span>

选中此http://getbootstrap.com/components/#glyphicons