当一个网站的小图片很多的时候，传统的网页插入图片是<img src=" "/>，就是用实实在在的图片，如果这些小图标够多的话，对于服务器请求有一定的负担，除了请求数，加载速度也会有一定的影响，纵使它是“小”图片。往往我们打开一个网站，当网速不给力的时候，看到一些小图标一个一个地加载出来，就知道它对访客的体验也不是太友好。当然你可以通过css sprite技术压缩图片同时减少服务器请求。但无论怎么减小服务器请求，它至少还要有一个请求。况且css sprite压缩的图片很不自由，当修改图片或者增减图片的时候很麻烦，你要保留原先的零碎图片再重新压缩合并。但是网页中矢量字体图标的出现，解决了所有问题。

网页中矢量字体图标的主要特色： ✓  它不是图片，但胜似图片； ✓  一种字体，自定义图标，是网页操作的象形语言； ✓  纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果； ✓  无限缩放，矢量图标在任何尺寸下都一模一样； ✓  减少服务器请求，优化加载速度； ✓  支持 Internet Explorer 7 浏览器； ✓  能够在各种屏幕完美呈现； ✓  丰富的图形图标让你免费选择； ✓  对设计师友好，设计师能够轻松使用； ✓  和其它图标字体不同，兼容屏幕阅读器；

矢量字体图标的优点介绍就到这里，现在来看看怎么制作和使用：

既然是一种字体，自然要有该字体库，很多网站为了使用这种字体，却引入通用矢量字体的字体库，其缺点是体积大，加载困难，反而在加重服务器负担，适得其反。字体库如何按需制作？只要到icomoon官网，点击选择自己需要的字体，选择完之后点击网页下方的font把字体下载下来，下载的文件里面有个文件夹是font，里面四个文件就是我们需要加载的字体库，其它文件都是附加说明的。 如何加载这四个文件？只需在自己的网站的css文件的起始加入以下代码：

@font-face {font-family: 'icomoon';src:url('fonts/icomoon.eot?-bmguq4');src:url('fonts/icomoon.eot?#iefix-bmguq4') format('embedded-opentype'),url('fonts/icomoon.woff?-bmguq4') format('woff'),url('fonts/icomoon.ttf?-bmguq4') format('truetype'),url('fonts/icomoon.svg?-bmguq4#icomoon') format('svg');font-weight: normal;font-style: normal;}

[class^="icon-"], [class*=" icon-"] {font-family: 'icomoon';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

剩下的就是定义特定元素的字体属性，拿例子来说会比较好理解。

比如说网页中引入一个元素<span class="icon-wuover"></span>,需要在css中再加入.icon-wuover:before {content: "\e601";}即可实现字体图标的显示。e601就是对应图标的代码，可自行替换，但需要注意的是class一定要有icon-前缀。另外可以通过修饰特定图标，比如说颜色，大小等等。

注：如果后续要增删图标请用下载包里面的selection.json文件到回icomoon官网进行增删。

教程完毕！