Bootstrap进阶一：Glyphicons 字体图标

基本组件是Bootstrap的精华之一，其中都是开发者平时需要用到的交互组件。例如：网站导航、标签页、工具条、面包屑、分页栏、提示标签、产品展示、提示信息块和进度条等。这些组件都配有jQuery插件，运用它们可以大幅度提高用户的交互体验！

1.如何使用

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

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

 

2.所有可用的图标

包括250多个来自 Glyphicon Halflings 的字体图标。








3.实例

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

 



alert 组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了。

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>