2013-12-31
在http://v3.bootcss.com/components/中介绍了Glyphicons 图标。
我们先看一下boosstrap v3的文件结构：
bootstrap3
├── css
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── fonts
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ └── glyphicons-halflings-regular.woff
└── js
├── bootstrap.js
└── bootstrap.min.js
在引入了bootstrap.min.css的html文件中，若是有下面的代码：
<span class="glyphicon glyphicon-search"></span>
在浏览器中会显示出一个精致搜索的图形。
我们看一下bootstrap.css（bootstrap.min.css是其压缩版本，即去掉不必要的空格换行等）相关代码：
@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');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}
/*省略部分内容*/
.glyphicon-search:before {
content: "\e003";
}
@font-face可以用来在网页中引入远程字体，很明显，这里引入了fonts目录中的字体。.ttf、.eot、.woff是不同的字体格式，.svg字体基于 SVG 。在css中为类glyphicon定义了font-family为Glyphicons Halflings，Glyphicons Halflings也就是之前用@font-face引入的字体。
:before 伪元素在元素之前添加内容，这个伪元素允许创作人员在元素内容的最前面插入生成内容（见参考资料[1]）。.glyphicon-search:before的意思也就显而易见，content指定内容。而\e003，在参考资料[2]中的解释为：
U+E003 is one of the 6400 characters in the Private Use Unicode subset.
这里\e003会对应Glyphicons Halflings中相应的内容对应起来。
这也就是web中的icon font。
另外，Glyphicons Halflings可以说是很优秀的艺术品，虽然一般不允许免费使用，但是其允许Bootstrap免费使用。关于Glyphicons，请见参考资料[6]。
参考资料
[1] http://www.w3school.com.cn/css/pr_pseudo_before.asp
[2] http://www.utf8icons.com/character/57347/UTF-8-character
[3] http://www.w3cfuns.com/thread-5597432-1-1.html
[4] http://www.w3cfuns.com/thread-5599089-1-1.html
[5] http://chipcullen.com/using-icons-from-icon-fonts-directly-in-css/
[6] http://glyphicons.com/