您的位置:首页 > Web前端 > BootStrap

Bootstrap入门(七)组件1:字体图标

2016-09-09 22:43 417 查看
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>


效果:



内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: