Bootstrap入门(七)组件1:字体图标
2016-09-09 22:43
417 查看
Bootstrap入门(七)组件1:字体图标
包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用。
部分可用图标截图:
所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格。
注意:
1.不要和其他组件混合使用
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的
2.只对内容为空的元素起作用
图标类只能应用在不包含任何文本内容或子元素的元素上。
3.使用需要外部引入的css文件
例子:
效果:
包括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组件学习笔记(一)——大纲、Glyphicons字体图标和下拉菜单
- BootStrap--CSS组件--字体图标(glyphicon)
- bootstrap --字体图标的设置 按钮组件
- Bootstrap--组件之Glyphicons字体图标
- Bootstrap 字体图标,下拉列表组件的使用
- bootstrap 新手入门(三) 按钮组件
- Bootstrap 字体图标(Glyphicons)
- Bootstrap中的字体图标
- ionic入门之色彩、图标和边距和界面组件:列表
- 很不错的两款Bootstrap Icon图标选择组件
- bootstrap新手入门(二)css 全局css样式及组件
- 很不错的两款Bootstrap Icon图标选择组件
- Bootstrap风格的按钮 BButton(把图标做成字体,可以省下很多图片资源)
- 精华 ionic入门之色彩、图标、边距和界面组件:列表
- Bootstrap 字体图标(Glyphicons)
- bootstrap入门【组件之按钮组,下拉菜单,嵌套】
- bootstrap中的Glyphicon 字体图标应用
- Bootstrap<基础十一>字体图标(Glyphicons)