页面当中，我们要用到的图片很多，尤其是做一些比较酷炫的效果的时候。这时候我们就得想办法对这些图片进行优化了，之前一个朋友做项目，页面图片压缩之后还要15M，你完全可以想象加载的有多慢了。相信很多人使用过精灵图这种方式，将很多小图标放到一张图里面，只要位置定位好就可以，但有时候并不是万能的。今天和大家分享的这个方法，就是把图片转换为字体，简单点说，使用类名，就像bootstrap那样，样式都已经定义好了，你直接使用类名就可以达到和图片一样的展示效果。

步骤很简单，只有三步：

1.准备好你的图片，只有一个要求，格式是SVG格式的图片，你可以通过格式转换器或者PS，当然如果你的PS没有这个功能那就说明版本太低了，你需要更新了。

2.图片准备好之后，你需要打开一个网站：https://www.hack95.com/  在这个网站上进行提交，生成你的图标字体。

3.将生成好的图标字体的文件夹fonts放到你的项目当中直接使用即可。

具体步骤看下面截图：

进来之后，你会看到很多网站提供的字体图标，不过这不是重点，因为我不怎么用他，点击左上角，生成我们自己的字体图标。