Bootstrap 图标

小图标组件

Bootstrap提供了的小图标：

可参考Bootstrap中文官网组件

原理

Bootstrap框架中的图标都是字体图标，是通过css3的@font-face属性配合字体来实现icon效果的。

@font-face {
font-family: ‘Glyphicons Halflings‘;
src: url(‘../fonts/glyphicons-halflings-regular.eot‘);
src: url(‘../fonts/glyphicons-halflings-regular.eot?#iefix‘) format(‘embedded-opentype‘), url(‘../fonts/glyphicons-halflings-regular.woff‘) format(‘woff‘), url(‘../fonts/glyphicons-halflings-regular.ttf‘) format(‘truetype‘), url(‘../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular‘) format(‘svg‘);
}

这些字体取自于Bootstrap框架中fonts目录（存放用于制作icon的字体文件），通过给元素添加“glyphicon”类名来实现，然后通过伪类“：before”的“content”属性调取对应的icon编码。

.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: ‘Glyphicons Halflings‘;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
<!--调用-->
<span class="glyphicon glyphicon-asterisk"></span>

使用

不与其他组件混合使用，应使用< i>或< span>标签配合使用

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

使用小图标

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

结合按钮

<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>