Twitter bootstrap 引导-如何在列表/选项卡中使用图标？

我正试图在推特引导中获得一些效果，但我很挣扎，我相信这一定是以前做过的。这两个问题都很相似，所以我只提出一个问题

我想做的是让图标在列表和导航栏中工作。我试图通过一点绘画来实现的每个效果的快速说明：

列表

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

我想在这里显示导航栏项目旁边的两个图标（以及第一个导航栏项目的活动区域内）。类似于列表的问题，这次图像被推到上面。我已经对Nav2进行了Photoshop，以说明我想要达到的效果

我试过

，我也试过

，但我相信这些都是神奇的，总是指向某种字形图标-我需要去读一下。我真正想要的是在这里使用自定义图像

---

任何建议/小例子都很好。谢谢。

我使用了比图片更好的图标

引导中使用图标的语法是使用带有类名图标的标记-。 默认情况下，glyphicons出现在引导中，但fontawesome有更多图标，并且完全免费。 您可以在此处了解有关字体真棒的更多信息：

以下是创建带有图标的导航和列表的方法：

我给你打电话

---

对于Bootstrap 3，您可以使用Bootstrap附带的Glyph图标执行类似操作

使用图标列出组：

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

带有图标的选项卡

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

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

或者，用图标堆叠导航

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

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

---

代码片段：

如果您需要更多帮助，请告诉我谢谢字体很棒的东西，我一定会稍后再看。我发现实际上你的代码一开始不起作用，并把它归结为我正在使用的bootswatch风格…你有没有实现它的问题。如果你能抛出一个测试页面。。我可以提供更多的帮助。干杯下面是一个未收集的示例，使用cerulean bootswatch主题。您的提琴不起作用，因为没有加载GlyphIcon。您的JSFIDLE的工作示例。要使您的JSFIDLE工作。。通过将css文件添加到左侧的参考资料部分来加载css文件。添加

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

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