bootstrap v3中的icon font

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文件中,若是有下面的代码:

在浏览器中会显示出一个精致搜索的图形。

我们看一下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/

( 完 )

 wechat
欢迎关注「樂天笔记」公众号