4.1.3　应用场景

icon样式可以用在各种元素容器内，比如button元素、nav列表元素等。例如，可以通过如下代码实现：

<div class="btn-group">
  <a class="btn btn-default btn-primary" href="#"><span class="glyphicon 
      glyphicon-user"></span>User</a>
  <a class="btn btn-default btn-primary dropdown-toggle" data-toggle=" href="#">
      <span class="caret"></span></a>
  <ul class="dropdown-menu">
     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span>Edit</a></li>
     <li><a href="#"><span class="glyphicon glyphicon-trash"></span>Delete</a></li>
     <li><a href="#"><span class="glyphicon glyphicon-ban-circle"></span>Ban</a></li>
     <li class="divider"></li>
     <li><a href="#">Make admin</a></li>
  </ul>
</div>

上述代码的运行效果如图4-2所示。

图4-2　icon在按钮里的运行效果

或者结合btn样式，显示效果如图4-3所示。

图4-3　结合btn样式的icon运行效果

<a class="btn btn-default btn-large" href="#">
   <span class="glyphicon glyphicon-star"></span> Star
</a>
<a class="btn btn-default btn-small" href="#">
   <span class="glyphicon glyphicon-star"></span>
</a>

另外，一个非常常见的场景是，在每个操作菜单前显示代表该菜单意思的icon，效果如图4-4所示。

图4-4　显示代表菜单意见的icon

实现方式需要在具有nav、nav-pills和nav-stacked样式的ul元素下才行（nav样式组件在后面章节中详细介绍）。注意，图标的颜色和右边的文字保存一致，也就是说，该图标用起来和普通文字一样，可以随意设定颜色。

<ul class="nav nav-pills nav-stacked">
 <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 
         Home</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> 
         Applications</a></li>
 <li><a href="#"><span class="glyphicon glyphicon-"></span> Misc</a></li>
</ul>

icon的最后一个常见场景是在表单的输入框前面或后面加上一个小图标，效果如图4-5所示。

图4-5　icon和输入框配合运行

也就是左边的addon显示的是小图标而不是字符，那么只需要在input-group-addon样式的元素内应用一个span或者i元素即可（然后在元素上应用glyphicon图标样式）。示例如下：

<div class="control-group">
 <div class="controls">
  <div class="input-group">
   <span class="input-group-addon">
   <span class="glyphicon glyphicon-envelope"></span>
   </span>
   <input class="col col-lg-2 form-control" id="inputIcon" type="text">
  </div>
 </div>
</div>