如何使用字体图标 iconfont

什么是 iconfont

iconfont就是字面上的意思，叫做“字体图标”，将一套图标集以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用。

为什么要使用 iconfont

在互联网刚起步的时候，较多使用的是png图片，但是png图片更换起来很麻烦， 并且自适应效果很差，有时候会出现锯齿以及马赛克模糊的情况，加载起来也较慢，影响用户体验。

iconfont 的产生就是来解决上面的问题，将 icon 做为字体来使用，它具有很多优势：

对 web 和 app：

• 弹性，在网页或者 app 上，展示字体是很便捷的。用 iconfont 可以很方便的改变 icon 的颜色，或者加入一些其他的效果。

• 可缩放，可以很方便的改变图标的大小。

• 矢量，iconfont 是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊。

• 节省加载时间，iconfont 很小，每个小图标只有几 kb，大大节省了加载时间。

对设计师来说：

• 可以本地使用，这个是我最喜欢的功能，将 iconfont 安装到本地的系统上，然后就可以在Ps，Ai，Sketch这些设计软件里使用啦~

推荐的两个 iconfont 工具

那么对于设计师来说，要做 iconfont 需要怎么操作呢？

首先，需要一个转换设计稿的平台。

目前，国内用的最多的是阿里巴巴矢量库，优点是这是国内的中文网站，使用起来无语言障碍，缺点就是版权问题，因为上传上来的图标全部是做为公开库的，其他人可以进行浏览下载。以下是阿里巴巴矢量库的官方免责声明。

enter image description here

在此，推荐一个国外的网站，iconmoon 创建于2011年，其上有很多成熟的图标集，大多数都是精心制作，要收费的，可以看看拿来参考。主要还是要用它提供的制作 iconfont 的功能。

如何使用 iconmoon

第一步

将设计的 icon 导出成 svg 文件。我做了一个 icon 参考线的sketch文件，其中有64x64，32x32，24x24三个尺寸，以此来保证一套图标中 icon 大小的一致性。文末提供下载。

enter image description here

第二步

打开iconmoon网站，点击 import icons 按钮，选择刚刚导出的 svg 格式的 icon，要注意的是，图标不能直接使用描边，要用布尔运算做成填充样式的，要不上传的图标在缩放的时候会遇到问题。

enter image description here

第三步

点击右下角的 generate font，再点击 download

enter image description here

第四步

会得到一个zip的压缩包

enter image description here

解压出来，可以看到有demo，有字体文件，也有使用代码

enter image description here

把这个文件夹直接给开发就ok啦~

如何在本地使用 iconfont

那么，如何在本地使用 iconfont 呢？

第一步

像安装正常字体文件一样安装刚刚解压的文件夹里的 .ttf 文件

enter image description here

第二步

打开 demo.html 文件复制里面的图标代号到 sketch 里面，复制如下图绿色部分。

enter image description here

第三步

选择字体，可以看到图标就出现了，可以像处理文字一样的处理图标，改变它的大小和颜色。

enter image description here

icon 参考线的下载地址