CSS精灵图的使用与字体图标的运用

精灵图
将小图片集中到一张大图片上，减少服务器接收和发送请求的次数，提高网页加载的速度。
将小图片集中而成的大图片叫精灵图。
同过移动背景位置background-position来实现在大图片中小图片的截取。
字体图标
1.图片文件大。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
使用字体图标iconfont可以很好解决问题 ，展示的是图标，本质属于字体。
优点：轻量级、灵活性、兼容性。
一个iconfont下载网站:
https://icomoon.io/
下载使用步骤:

选择好要使用的图标后，点击Generate Font。
再点击Download，开始下载。
下载后解压，将文件夹Fonts放到我们项目HTML所再的文件夹中去。打开style.css文件，复制一下代码：

以下是上面复制下来的代码

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?wm58se');
  src:  url('fonts/icomoon.eot?wm58se#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?wm58se') format('truetype'),
    url('fonts/icomoon.woff?wm58se') format('woff'),
    url('fonts/icomoon.svg?wm58se#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

注意路径！

使用：每一个字体图标对应着一个特殊符号，打开解压后文件中的demo.html

复制图中的特殊符号，这个特殊符号就代表着对应的字体图标。
例如：

<span></span>

同时对应的font-family设置为icomoon。
如果想要添加新的字体图标，则需要把压缩包中的selection.json重新上传，然后重新选择自己想要的图标，重新下载压缩文件，并替换原来的文件即可。
具体步骤如下：
打开IconMoon官网，点击IconMoon App。

点击Import Icons，上传之前压缩包中的selection.json文件。

之后再选择需要新加入的字体图标，再下载压缩包覆盖原文件即可。