想必很多前端开发的同仁对icon font已经早已熟悉得跟以前的css sprites还是有点不太一样的，主要是用途和适用的场景发生了变化。现在随着平板，移动设备的膨胀式爆发，简单的网页已经不适用多种场景了，响应式布局正弥补了这个空缺，所以图标随着放大缩小，以前的普通图片会失帧，会变得模糊，进而需要字体图标–icon font。

当然icon font也不是都是优点，它自身的缺点主要来自于其颜色的单一。

Step1

首先我们得制作一套图标字体，或者说有现成的也可以。由于主要关注点在前端，我就直接用现成的了。

推荐两个icon font在线生成的网站，里面有免费的，也有收费的。

• IcoMoon: https://icomoon.io/
• 阿里妈妈: http://www.iconfont.cn/

由于我们这里主要是国内用户，就主要用阿里妈妈来说明，当然两个网站的原理都差不多。

Step2

然后根据下图指向操作，下载到本地，然后打开demo.html。

Step3

Demo.html里面就有icon font的具体操作方法，比如在项目中：

然后就可以在网页上看到自己喜欢的字体图标了，类似我的右上角的图标，都是icon font生成的哦。