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>

你可能感兴趣的:(Bootstrap)