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()地址。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,925评论 3 184
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1 92
  • 第5章 菜单、按钮及导航 一、下拉菜单 小伙伴们注意,在Bootstrap框架中的下拉菜单组件是一个独立的组件,根...
    凛0_0阅读 5,056评论 0 66
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,385评论 25 708
  • 这是我一本很有名的书,早就想看了,最近终于开坑了。 我之所以认可非暴力沟通,首先是它很简单,简单的东西我都特别喜欢...
    快刀武士beauty阅读 247评论 0 0