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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 18:28:14  来源:igfitidea点击:

Why won't my Bootstrap 3 button icons display?

csstwitter-bootstraptwitter-bootstrap-3

提问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,fontsjs. 所有这些都是直接从 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>

Check this http://getbootstrap.com/components/#glyphicons

检查这个http://getbootstrap.com/components/#glyphicons