为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵图（sprites）的使用
使用精灵图核心：
1、精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2、这个大图片也称为sprites精灵图 或者 雪碧图。
3、移动背景图片位置，此时可以使用background-position。
4、移动的距离就是这个目标图片的x和y坐标。
5、因为一般情况下都是往上往左移动，所有数值是负值。
6、使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。
缺点：
1、图片文件还是比较大的 。
2、图片本身放大或缩小会失真。
3、一旦图片制作完毕想要更换会非常复杂。
为了解决这些缺点，可以使用字体图标iconfont.
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标优点：
轻量级：一个图标字体要比一系列的图像小。一旦字体加载了，图标就会马上渲染出来，减少服务器请求。
灵活性：本质其实是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有的浏览器，请放心使用。
注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。
字体图标的下载网站：
icomoon字库 icomoon.io
阿里iconfont字库 www.iconfont.cn/
不同的浏览器所支持的字体格式是不一样的，字体图标之所以兼容，是因为包含了主流浏览器支持的字体文件。
字体图标的引入：
1、下载完毕之后，把下载包里面的fonts文件夹放入页面根目录下
2、
字体图标的追加：
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的selection.json重新上传，然后选中自己想要的新图标，从新下载压缩包，并替换原来的文件即可。
