icons-icomoon.png
背景一般都是使用大图片来做的，小图片是作为一般常作为图标使用。
每个图标一个小图片，会有效率和管理的麻烦。于是聪明的前端把多个小图标合成一张图片处理，这种图片被称为sprite图，国人称为雪碧图。
如何使用雪碧图，给页面加上图标？只需要三步
- 设置标签的宽度和高度
width:18px;
height:18px;
这里的`18px`只是示例值，是图标的真实大小，需要具体测量。
提示：如果是行内标签，需要设置`display`为`inline-block`。
- 设置图片路径
background-image : url(../img/sprite.png);
background-repeat : no-repeat;
提示：需要设置图片不平铺，避免不必要的错误。
- 设置图片显示起始位置
background-position : -400px -500px;
这里的400px只是示例值，是图标的左上角与图片左上角之间的水平距离，500px也是示例值，是图标的左上角与图片左上角之间的垂直距离，需要具体测量。不要忘记在数值前加上-。至于为啥加上-是平面几何中平移向量的概念，有兴趣的童鞋可以进一步的了解一下。
以上第二步和第三步可以使用一条声明完成，如下：
background : url(../img/sprite.png) -400px -500px no-repeat;
但是，一定要记住，非零数字前面一定会有-。
OK，三步完成CSS使用雪碧图的小图标。你get了吗？
如有问题，请在下面留言。
