4.1.1　基本用法

小图标的基本用法非常简单，在任何内联元素上应用所对应的样式即可。示例如下：

  1. <!-- 第一种方式 --><i class="glyphicon glyphicon-search"></i>
  2. <!-- 第二种方式 --><span class="glyphicon glyphicon-search"></span>

所有的icon样式都以glyphicon-开头，这是因为这些小图标都是http: //glyphicons.com/网站提供，使用的时候必须同时使用两个样式，即.glyphicon和以.glyphicon-*开头的样式（稍后会讲解其原因）。

注意

glyphicons.com是一家提供商业icon图片集的网站，上述200个icon免费授权给了Bootstrap框架，所以大家可以随意免费试用。

小图标可以用于多种用途，比如编辑器里的小图标等。示例如下：

  1. <div class="btn-toolbar">
  2.   <div class="btn-group">
  3.      <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-left">
  4.                </span></a>
  5.      <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-center">
  6.                </span></a>
  7.      <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-right">
  8.                </span></a>
  9.      <a class="btn btn-default" href="#"><span class="glyphicon glyphicon-align-justify">
  10.                </span></a>
  11.   </div>
  12. </div>

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

4.1.1　基本用法 - 图1 图4-1　icon运行效果

全部的Glyphicons小图标请查阅附录D。