Bootstrap2用户指南
3.7.2 如何使用字体图标
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

排版

源代码

表格

表单

按钮

图片

图标

字体图标Glyphicons

如何使用字体图标

Bootstrap 提供了 glyphicons-halflings.png 和 glyphicons-halflings-white.png 两个图标文件,它们的效果完全相同。不同的是,前者是白底黑色图标,后者是黑底白色图标。

每个图标都需要依附于一个 <i> 标签,并且赋予唯一的一个类(class)。任何需要使用图标的地方,只需给 <i> 标签添加以 .icon- 为前缀的类即可。比如,要使用搜索图标,就给 <i> 标签添加 .icon-search 类:

<i class="icon-search"></i>

如果想使用白色样式的图标,只需再追加一个 .icon-white 类即可:

<i class="icon-search icon-white"></i>

注意! 当在字符串的内部使用这些图标时,如按钮或导航链接中使用图标,务必在 <i> 标签的后面添加一个空格,这样就能确保图标两侧留有合适的间距。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验