Bootstrap布局组件——字体图标

Bootstrap 字体图标(Glyphicons)

字体图标是在 Web 项目中使用的图标字体。
字体图标用于显示小图标。它们是轻量级的图标，而不是图像。
要使用Bootstrap图标，请用基础类glyphicon和单个图标类 glyphicon-*标记<span>标签。
使用Bootstrap图标的一般语法是：

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

“glyphicon-class-name”是在bootstrap.css中定义的icon类的名称。

以下代码显示一个心形图标。
<span class="glyphicon glyphicon-heart"></span>

字形图标中的每个图标都有一个唯一的类。
下面是一些字体图标

字体图标.png

如何使用

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

不要和其他组件混合使用

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

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

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

改变图标字体文件的位置

Bootstrap 假定所有的图标字体文件全部位于../fonts/
目录内，相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置，那么，你需要通过下面列出的任何一种方式来更新 CSS 文件：
1、在 Less 源码文件中修改@icon-font-path和/或@icon-font-name变量。2、利用 Less 编译器提供的 相对 URL 地址选项。
3、修改预编译 CSS 文件中的url()地址。