码迷,mamicode.com
首页 > 其他好文 > 详细

初学者--bootstrap(六)组件中的字体图标----在路上(9)

时间:2017-01-03 20:34:55      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:icons   标签   line   css   功能   cal   设置   下拉   不能   

组件---字体图标

无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

1、如何使用:

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

技术分享

 

2、不要和其他组件混合使用:

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

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

 

可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

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

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

4、改变图标字体文件的位置

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

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

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

初学者--bootstrap(六)组件中的字体图标----在路上(9)

标签:icons   标签   line   css   功能   cal   设置   下拉   不能   

原文地址:http://www.cnblogs.com/gengaiwei/p/6196946.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!