在网页中画Icon小图标。 现代网页中，绝大部分都采用了Icon小图标的方式。其积分大致分为三类，CSS Sprite,font+HTML,font+CSS。

CSS Sprite：又称为CSS雪碧，把网页中零星背景图片整合在一张图片文件夹中，再利用CSS的背景图片技术定位到要显示的位置。优点：减少文本体积和服务器请求次数，从而提高效率。 知识点：background-image background-position（向下向右取的是负值）。 特点：1，相对单个图标，节省文本体积和服务器请求次数。 2，一般情况下保存为PNG-24格式，这样图片质量。 3,可以自己设计多种多样的图标。 难点：事先确定好每个小图标的大小,还有就是细心+耐心。

Icon Fonts 优点：1,灵活性：可以改变颜色或或其他CSS效果。 2,可扩展：改变图标的大小 3，矢量性，缩放大小不失真 4，兼容性：支持所有现代浏览器 5，本地使用。

字体图标工具网站 IcoMoon  https://icomoon.io eot IE专用字体（兼容IE678） WOFF 被推荐为标准（支持度比较好） TTF IE9以上以及所有浏览器支持（支持度比较好） svg 兼容低版本的Safari和opera。

font+HTML

在CSS里设置

@font-face{
     　　　　　　font-family:"font-name"; 　　　　　　src:url("***.eot") format("embedded-opentype"), 　　　　　　　　url("***.ttf") format("..."); 　　　　　　　　font-weigth:normal;  　　　　　　　　font-style:normal; }

.imooc-icon{

　　　　　　font-family:"font-name";  

　　　　　　font-size:77px; } //在HTML使用十六进制编码表示图标

<span class="imooc-icon">&#xf048;</span>//需要加&#x前缀

 

在IE9兼容模式下 CSS中这样设置

@font-face{
     　　　　　　font-family:"font-name";  　　　　　　src:url("***.eot");/* IE9兼容模式*/  　　　　　　src:url("***.eot") format("embedded-opentype"), 　　　　　　　　url("***.ttf") format("...")  　　　　　　　　font-weigth:normal;  　　　　　　　　font-style:normal; }

 

font+CSS 主要技术点是在CSS中设置特定class类的:before伪类的content属性。 也是先通过@font-face引入字体文件，

.classname:before{
         content:"\16进制编码";}