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

Question

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

8

我试图在Twitter Bootstrap中实现一些效果，但我遇到了困难，我相信这以前肯定做过。两个效果非常相似，所以我把它们合并成一个问题。

我想要做的是使图标在列表和导航栏中起作用。我通过绘画快速说明了我尝试实现的每个效果: 列表 enter image description here

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

我想要在导航栏项目旁边显示两个图标（并在第一个导航栏项目的活动区域内）。与列表类似的问题，这次图像被推到上面。我使用Photoshop修改了Nav2以说明我想要实现的效果。我尝试了<img>，并且也试过<i>，但我相信它们是以某种方式变魔术并始终指向某些字形图标 - 我需要去了解这些内容。我真正想要的是在此处使用自定义图像。任何建议/示例都将非常棒。谢谢。

- Ian

2个回答

6

对于 Bootstrap 3，您可以使用包含在 Bootstrap 中的图标字体来实现以下操作...

带有图标的列表组：

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

Codeply代码片段：http://codeply.com/go/E0R4MTFrFS

- Zim

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shail · Accepted Answer

我使用了fontawesome图标，它比图片更好。

在Bootstrap中使用图标的语法是使用带有class名称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;
     }