一.CSS Sprite

这也就是我们平时所说的雪碧图（也叫精灵图），主要通过background-position属性来控制图片显示的位置，不过要注意的是图片是以左上角为坐标原点，坐标的变动应在第四象限内，及x的取值为0到正无穷，y的取值为负无穷到0.

二.使用font icon

首先我们要下载font字体文件，推荐网站：https://www.iconfont.cn/

选择icon后添加购物车，下载代码（建议创建一个项目，将图标加入到项目中，这样方便后续维护），我们会得到以下几个文件，其中标红的为必须文件，一个为css样式文件，其余四个为字体文件。（除了这5个文件，其它文件可以删除）

 

demo_index.html页面显示了如何使用字体图标：

 

使用方式：

方式一：font+html

<span class="iconfont iconriqi">&#x33;</span>

方式二：font+css

<span class="iconfont iconriqi"></span>