Bootstrap入门组件1:字体图标

Posted DL_dl

tags:

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

Bootstrap入门(七)组件1:字体图标
 
包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用。
部分可用图标截图:

 

所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。
 
注意:
1.不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上。
 
2.只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
 
3.使用需要外部引入的css文件
 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
 
例子:
<button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-star"></span> Star
</button>

 

效果:
 

 

 

以上是关于Bootstrap入门组件1:字体图标的主要内容,如果未能解决你的问题,请参考以下文章

JavaLearn#(25)Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述

三个Bootstrap免费字体和图标库

Bootstrap入门使用

JavaLearn#(25)Ajax相关知识三级联动案例Bootstrap入门栅格系统排版表格字体图标等简单概述

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

vue怎么引入bootstrap的字体图标