前端技巧集：小图标

icons-icomoon.png

背景一般都是使用大图片来做的，小图片是作为一般常作为图标使用。
每个图标一个小图片，会有效率和管理的麻烦。于是聪明的前端把多个小图标合成一张图片处理，这种图片被称为sprite图，国人称为雪碧图。

如何使用雪碧图，给页面加上图标？只需要三步

1. 设置标签的宽度和高度

  width:18px;
  height:18px;    

这里的`18px`只是示例值，是图标的真实大小，需要具体测量。
提示：如果是行内标签，需要设置`display`为`inline-block`。

2. 设置图片路径

  background-image : url(../img/sprite.png);
  background-repeat : no-repeat;

提示：需要设置图片不平铺，避免不必要的错误。

3. 设置图片显示起始位置

  background-position : -400px -500px;

这里的400px只是示例值，是图标的左上角与图片左上角之间的水平距离，500px也是示例值，是图标的左上角与图片左上角之间的垂直距离，需要具体测量。不要忘记在数值前加上-。至于为啥加上-是平面几何中平移向量的概念，有兴趣的童鞋可以进一步的了解一下。

以上第二步和第三步可以使用一条声明完成，如下：

background : url(../img/sprite.png)  -400px -500px no-repeat;

但是，一定要记住，非零数字前面一定会有-。

OK，三步完成CSS使用雪碧图的小图标。你get了吗？

---

如有问题，请在下面留言。