Bootstarp学习（六）图标

200个icon：

这里说的图标就是Web制作中常看到的小icon图标，可以说这些小icon图标是一个优秀Web中不可缺少的一部分，起到画龙点睛的效果。在Bootstrap框架中也为大家提供了近200个不同的icon图片，而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

放心使用：

在具体介绍Bootstrap的icon图标之前，我们首先要感谢glyphicons.com网站，因为Bootstrap框架中图标都是glyphicons.com这个商业网站提供的，并且免费授权给Bootstrap框架使用，所以大家可以放心使用在自己的项目当中。

Bootstrap框架将内部样式也提取出来：
1、LESS版本：对应源文件为glyphicons.less文件
2、Sass版本：对应源文件为_glyphicons.scss文件
3、编译后的Bootstrap版本：查看bootstrap.css文件第2375行～第2992行

原理分析：

Bootstrap框架中的图标都是字体图标，其实现原理就是通过@font-face属性加载了字体。
/*源码请查看bootstrap.css文件第2357行～第2380行*/

@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的字体文件。
自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码：
/*源码请查看bootstrap.css文件第2381行～第2992行*/

.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-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

运行效果如下或查看右侧结果窗口：

所有icon都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称。具体说明如下：

所有名称查看：

请点击：http://getbootstrap.com/components/#glyphicons 链接查阅或根据bootstrap.css文件第2393行～第2992行查阅。

特别说明：

除了使用glyphicon.com提供的图标之外，还可以使用第三方为Bootstrap框架设计的图标字体，如Font Awesome(http://www.bootcss.com/p/font-awesome/)。使用方法和上面介绍的一样，不过记得将字体下载到你本地。 感兴趣的可以阅读官网相关介绍。

	<span class="glyphicon glyphicon-search"></span>
	<span class="glyphicon glyphicon-asterisk"></span>
	<span class="glyphicon glyphicon-plus"></span>
	<span class="glyphicon glyphicon-cloud"></span>