在网页中有许多的icon，购物车，搜索...等等诸如此类，实现的方法也很简单，给一个元素设置背景图就可以实现了，然而每次获取背景图的时候都需要发送一次请求，这是非常浪费的行为，所以一般网页都会使用css sprites。
css sprites：精灵图，也被称为雪碧图。将网页中需要用到的图标用PS合并在一张图片上，通过设置background-position实现icon，当然制作精灵图还有更加简单的方法，可以使用命令行制作，首先安装css-sprite，安装完成之后的步骤如下：
- 准备一个目录（resources）里面放需要拼凑的图片
- 安装sprity-cli
- 命令行： sprity create build resources/*.png -s style.css
- 执行之后会生成一个build目录，里面会有一张图片和一个css文件，这样，精灵图就做好了，
或者在线网站 （该链接并非私密链接）也可以制作精灵图，打开链接后如图所示，只需要将需要合并的图片放入黑白格中然后下载就完成了，非常方便。注意，以上方法做出的图片需要先把原图尺寸变为自己需要的尺寸再生成，不然生成之后大小很难更改；
image.png
icon还有一种实现方式，iconFont（字体图标）。在阿里巴巴图标库中，有许多的字体图标，你可以选择你需要的图标使用，详细的使用方法如下：
把需要的图标下载至本地，打开这个zip文件，将(eot/ttf/svg/woff）这四个格式的文件放置在你的images文件夹，打开文件中的css文件，复制@font-face一整段声明该字体，注意url的路径不要弄错；声明之后在需要使用该图标的地方输入Unicode编码就可以使用该字体图标了。当然如果库中没有你想使用的字体图标，你还可以自己上传图标，上传方法可以点帮助进行查看。
