字形图标 如何使用

W3CSchool > bootstrap3中文手册 > Bootstrap 字形图标 > 字形图标 如何使用

语法

如需使用图标,只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

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

如何使用?

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

不要和其他组件混合使用

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

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

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

  1. <p> 
  2.    <button type="button" class="btn btn-default"> 
  3.       <span class="glyphicon glyphicon-sort-by-attributes"></span> 
  4.    </button> 
  5.    <button type="button" class="btn btn-default"> 
  6.       <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> 
  7.    </button> 
  8.    <button type="button" class="btn btn-default"> 
  9.       <span class="glyphicon glyphicon-sort-by-order"></span> 
  10.    </button> 
  11.    <button type="button" class="btn btn-default"> 
  12.       <span class="glyphicon glyphicon-sort-by-order-alt"></span> 
  13.    </button> 
  14. </p>
  15. </p>
  16. <p>
  17. <button type="button" class="btn btn-default btn-lg"> 
  18.   <span class="glyphicon glyphicon-user"></span> User 
  19. </button> 
  20. <button type="button" class="btn btn-default btn-sm"> 
  21.   <span class="glyphicon glyphicon-user"></span> User 
  22. </button> 
  23. <button type="button" class="btn btn-default btn-xs"> 
  24.   <span class="glyphicon glyphicon-user"></span> User 
  25. </button> 
  26. </p>

下面的实例演示了如何使用字形图标(Glyphicons):

点击获取字形图标大全:字形图标大全

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)