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>
字形图标中的每个图标都有一个唯一的类。
下面是一些字体图标
如何使用
出于性能的考虑,所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。
不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的<span>
标签,并将图标类应用到这个<span>
标签上。
只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
改变图标字体文件的位置
Bootstrap 假定所有的图标字体文件全部位于../fonts/
目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:
1、在 Less 源码文件中修改@icon-font-path和/或@icon-font-name变量。2、利用 Less 编译器提供的 相对 URL 地址选项。
3、修改预编译 CSS 文件中的url()地址。