[Bootstrap入门][组件-Glyphicons 字体图标]
程序员文章站
2024-02-18 14:54:28
...
[Bootstrap入门][组件-Glyphicons 字体图标]
标签(空格分隔): 未分类
所有可用图标
包括200个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的,但是他们的作者允许 Bootstrap 免费使用。为了表示感谢,希望你在使用时尽量为 Glyphicons 添加一个友情链接。
如何使用
出于性能考虑,所有的图标都需要一个基类和对应图标的类。
- 为了设置正确的内补(padding),务必在图标和文本之间加一个空格。
- 应该创建一个嵌套的
<span>
标签,并将图标类应用到这个<span>
标签上。 - 图标类只能应用在不包含任何文本内容或子元素的元素上。
实例
可以把他们应用到按钮,工具栏的按钮组,导航或输入框等地方。
- 最好将其放到span里,否则不能对齐
<form class="form-inline" role="form">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-star"></span></div>
<input class="form-control" type="email" placeholder="Enter email">
</div>
</div>
</form>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
推荐阅读
-
[Bootstrap入门][组件-Glyphicons 字体图标]
-
zTree使用 bootstrap字体图标
-
Bootstrap字体图标
-
vue.js入门 2.vue cli中使用字体图标库(iconfont)
-
Bootstrap3的Glyphicons字体图标的使用方法
-
在SVG中使用Bootstrap或FontAwesome图标字体
-
Bootstrap组件(小图标、下拉菜单、输入框、导航和导航条、媒体对象、列表组、分页导航、缩略图)
-
详解Bootstrap glyphicons字体图标_javascript技巧
-
Bootstrap组件之Glyphicons字体图标_html/css_WEB-ITnose
-
Bootstrap免费字体和图标网站(值得收藏)