还在为小图标不能适应各种设备发愁吗？iconfont为你解决所有问题

我看到我们网站的图标还用的图标来做的时候，我感叹了下，失真严重啊，gif动画图标锯齿那个严重啊，看不下去了，我给大家分享下我已经用了很久的一种技巧，现在移动设备，微信公众号，包括很多网站都已经用上了字体图标的方式来显示小图标了(iconfont)，和文字一样，不会有失真，而且配合css3的动画基本能替代很多的gif动画。还有个好处就是字体文件比图片小很多，还提供不同的很多字体格式，只要不是太落后的浏览器都没问题

  

下面给大家介绍下怎么制作图标字体，阿里旗下的这个网站有非常丰富的图标资源： http://www.iconfont.cn  

1、从 http://www.iconfont.cn   找到你想要的图标，以svg格式下载到本地，想要多少下载多少

2、 https://icomoon.io/app/#/select  打开这个网站我们就可以制作自己的图标字体了，点击import icons 按钮，把下载的svg格式图标导入进来，然后你就能在线看到你导入的图标，宾且可以进行在线编辑，编辑功能非常强大，完全够用

3、导入编辑好后，选中你想要的图标，点击右下角的生成字体按钮，会自动生成好字体，下载后，压缩包里包含了css样式，直接用就是了，非常方便