twitter-bootstrap - Bootstrap - 如何在列表/选项卡中使用图标？

Question

我试图在 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>

我试过包括 <img>和 <span>和 <div>全部使用 class="close"但似乎没有一个能正常工作，我能到达的最近的方法是让它们显示在下一行。

导航栏

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

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

我试过 <img> ，我确实尝试了 <i>但我相信这些在某种程度上是神奇的，并且总是指向某种字形图标——我需要去阅读这些。我真正想要的是在这里使用自定义图像。

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

Answer 1

我使用了比图像更好的 fontawesome 图标。

在 Bootstrap 中使用图标的语法是使用带有类名 icon- 的标签。
默认情况下， Bootstrap 中存在 glyphicons，但 fontawesome 有更多图标并且完全免费。
你可以在这里了解更多关于 font-awesome 的信息:http://fortawesome.github.com/Font-Awesome/#integration

这是您可以使用图标创建导航和列表的方法:

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>

结果在浏览器中:

对于导航，您可以执行类似操作:

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

以防万一您迫切需要使用图像。您必须创建类并将图标图像放入其中。如下所示:

 .icon-edit {
     background:url('/images/edit.png') 0 0 no-repeat;
     height: 16px;
     line-height: 16px;
     width: 16px;
     }