twitter-bootstrap Bootstrap - 如何在列表/选项卡中使用图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15086459/
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
Bootstrap - How to use icons in lists/tabs?
提问by Ian
I'm trying to get a couple of effects in Twitter Bootstrap but I'm struggling, and I'm sure it must have been done before. Both are quite similar so I've rolled into a single question.
我正在尝试在 Twitter Bootstrap 中获得一些效果，但我很挣扎，而且我确信以前肯定已经做过了。两者都非常相似，所以我提出了一个问题。
What I want to do is get Icons working within both a list and a navbar. A quick illustration of each effect I'm trying to achieve via a bit of painting:
我想要做的是让图标在列表和导航栏中工作。我试图通过一点绘画实现的每种效果的快速说明：
List
列表
<div class="well span4">
<ul class="nav nav-list">
<li class="active"><a href="#">Value 1</a></li>
<li><a href="#">Value 2</a></li>
<li><a href="#">Value 3</a></li>
</ul>
</div>
I have tried including <img>and <span>and <div>all with the class="close"but none seemed to work properly, the nearest I could get to was having them display on the next line.
我曾尝试，包括<img>与<span>和<div>所有与class="close"但似乎没有正常工作，最近我能得到了让他们在下一行显示。
Nav Bar
导航栏
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">NavBar</a>
<div class="nav-collapse">
<ul class="nav">
<li class="divider-vertical"></li>
<li class="active">
<img src="edit.png" width="16" height="16"/>
<a href="#">Nav 1</a>
</li>
<li>
<img src="play.png" width="16" height="16"/>
<a href="#">Nav 2</a>
</li>
</ul>
</div>
</div>
</div>
</div>
What I want here is to display the two icons beside the navbar items (and within the active region for the first navbar item). Similar sort of problem as the list, the image gets pushed above this time. I've photoshopped the Nav2 to illustrate the effect I want to achieve.
我想要的是在导航栏项目旁边（以及第一个导航栏项目的活动区域内）显示两个图标。与列表类似的问题，这次图像被推到了上面。我对 Nav2 进行了 Photoshop 处理以说明我想要达到的效果。
I've tried <img>, and I did try an <i>but I believe these are magic somehow and always point to some sort of glyph icons - I need to go read about these. What I really want is to use use custom images here.
我试过<img>，我也试过，<i>但我相信这些在某种程度上是魔术，并且总是指向某种字形图标 - 我需要去阅读这些。我真正想要的是在这里使用自定义图像。
Any suggestions / little examples would be great. Thanks.
任何建议/小例子都会很棒。谢谢。
回答by Shail
I have used fontawesome icons which are better than images .
我使用了比图像更好的 fontawesome 图标。
The syntax to use icons in bootstrap is to use tag with a class name icon- .
BY default glyphicons are present in bootstrap but fontawesome has more icons and is completely free .
You can know more about font-awesome here :http://fortawesome.github.com/Font-Awesome/#integration
在引导程序中使用图标的语法是使用带有类名 icon- 的标记。默认情况下，引导程序中存在字形，但 fontawesome 具有更多图标并且完全免费。你可以在这里了解更多关于 font-awesome 的信息：http: //fortawesome.github.com/Font-Awesome/#integration
This is how you can create your navigation and lists with icons :
这是您创建导航和带有图标的列表的方法：
Jsfiddle for you http://jsfiddle.net/shail/GKsSd/2/
jsfiddle 给你http://jsfiddle.net/shail/GKsSd/2/
for Lists :
<div class="well span4">
<ul class="nav nav-list">
<li class="active"><a href="#">Value 1 <i class=" icon-remove pull-right"></i></a> </li>
<li class="active"><a href="#">Value 2 <i class=" icon-remove pull-right"></i></a></li>
<li class="active"><a href="#">Value 3 <i class=" icon-remove pull-right"></i></a></li>
</ul>
Result in browser :
For navigation you can do the similar :
结果在浏览器中：
对于导航，您可以执行类似操作：
<div class="navbar">
<div class="navbar-inner">
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
<i class="icon-bar"></i>
</a>
<a class="brand" href="">New Icon Menu</a>
<div class="nav-collapse">
<ul class="nav nav-pills pull-right">
<li><a href=""><i class="icon-home icon-2x"></i> Home<br></a>
</li>
<li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a>
</li>
<li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a>
</li>
<li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
Just in case you desperately need to use images. You will have to create classes and put the icon image inside it . Like following :
以防万一您迫切需要使用图像。您必须创建类并将图标图像放入其中。像下面这样：
.icon-edit {
background:url('/images/edit.png') 0 0 no-repeat;
height: 16px;
line-height: 16px;
width: 16px;
}
回答by Zim
For Bootstrap 3 you can do something like this using the glyphicons which are included with Bootstrap...
对于 Bootstrap 3，您可以使用 Bootstrap 中包含的字形执行类似的操作...
List group with icons:
带图标的列表组：
<div class="list-group">
<a href="#" class="list-group-item active">Active item <i class="glyphicon glyphicon-camera pull-right"></i></a>
<a href="#" class="list-group-item">Second item <i class="glyphicon glyphicon-envelope pull-right"></i></a>
<a href="#" class="list-group-item">Third item <i class="glyphicon glyphicon-chevron-right pull-right"></i></a>
</div>
Tabs with icons..
带有图标的标签..
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home <i class="glyphicon glyphicon-dashboard"></i></a></li>
<li><a href="#">Tab1 <i class="glyphicon glyphicon-tree-conifer"></i></a></li>
<li><a href="#">Tab2 <i class="glyphicon glyphicon-fire"></i></a></li>
</ul>
or, stacked nav with icons..
或者，带有图标的堆叠导航..
<ul class="nav nav-tabs nav-stacked">
<li><a href="#">One <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
<li><a href="#">Two <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
<li><a href="#">Three <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
<li><a href="#">Four <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
</ul>
Codeply snippets: http://codeply.com/go/E0R4MTFrFS
Codeply 片段：http://codeply.com/go/E0R4MTFrFS
