精灵图
精灵技术的目的：为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度。
使用精灵图核心：
1、精灵技术主要针对于背景图片使用，就是把多个小背景图片整合到一张大图片中；
2、这个大图片也称为sprites 精灵图 或者 雪碧图；
3、移动背景图位置，此时可以使用 background-position；
4、移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同；
5、因为一般情况下都是往上往左移动，所以数值是负值。
字体图标 （iconfont）展示的是图标，本质属于字体
优点：
- 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少服务器请求；
- 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等；
- 兼容性：几乎支持所有的浏览器，请放心使用。
注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化