转载

字形图标如何使用

语法

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

 <span class="glyphicon glyphicon-search"> </span>

如何使用？

出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。

只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

<p>

   <button type="button" class="btn btn-default">

      <span class="glyphicon glyphicon-sort-by-attributes"></span>

   </button>

   <button type="button" class="btn btn-default">

      <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>

   </button>

   <button type="button" class="btn btn-default">

      <span class="glyphicon glyphicon-sort-by-order"></span>

   </button>

   <button type="button" class="btn btn-default">

      <span class="glyphicon glyphicon-sort-by-order-alt"></span>

   </button>

</p>

</p>

<p>

<button type="button" class="btn btn-default btn-lg">

  <span class="glyphicon glyphicon-user"></span> User

</button>

<button type="button" class="btn btn-default btn-sm">

  <span class="glyphicon glyphicon-user"></span> User

</button>

<button type="button" class="btn btn-default btn-xs">

  <span class="glyphicon glyphicon-user"></span> User

</button>

</p>