Glyphicons 字体图标

Posted 乜**乜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Glyphicons 字体图标相关的知识,希望对你有一定的参考价值。

所有可用的图标

包括260个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。为了表示感谢,希望你在使用时尽量为 Glyphicons 添加一个友情链接。

如何使用

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

不要和其他组件混合使用

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

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

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

改变图标字体文件的位置

Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:

  • 在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
  • 利用 Less 编译器提供的 相对 URL 地址选项
  • 修改预编译 CSS 文件中的 url() 地址。

根据你自身的情况选择一种方式即可。

以上是关于Glyphicons 字体图标的主要内容,如果未能解决你的问题,请参考以下文章

python测试开发django-138.Bootstrap 字体图标(Glyphicons)

项目经验:Glyphicons字体图标改造,制造适合自己项目的字体图标

关于font awesome或Glyphicons字体图标不能正确显示的问题

Bootstrap 关于Glyphicons 字体图标的使用

bootstrap3的Glyphicons 图标无法显示怎么解决

学习实现bootstrap glyphicons字体