如何构建简易字体图标库

前言

之前想要分析FontAwesome字体图标集，想要了解如何从零实现字体图标，由于种种原因中间搁置了，最近空闲突然想起了就趁此机会实践下实现打造图标库。

具体实现

本文主要分为三个部分，分别如下：

1. 使用AI将PNG装换成SVG
2. 使用iconMoon将SVG转换成字体图标
3. 使用@font-face应用字体图标到实践中

PNG TO SVG

查找相关资料使用AI将PNG转换成SVG，但是发现有一定的限制，限制如下：

• PNG是位图，SVG是矢量图，如果尺寸很小，使用AI导出为SVG再转换成字体图标存在问题，一片空白
• 查找相关的资料，别人建议PNG的尺寸至少为300*300，背景透明

---

选择220*220的PNG图片，AI中具体的处理流程如下：

1. 在AI中打开PNG图片

2. 全选图片，选择顶部区域的窗口—图像临摹
   

3. 打开视图—显示透明度网格
   

4. 全选图片区域，选择对象—扩展
   

5. 切换到直接选择工具，按delete快捷键去除白色背景，之后导出为svg即可

SVG TO 字体图标
使用iconMoon网站（iconMoon）上传你的SVG文件
就使用上面装换的svg文件，操作如下：

最上面的就是刚才转换的SVG文件，之所以建议300*300的PNG图片，就是因为小于这个尺寸的PNG装换为SVG会很小

选择你需要转换的图标设置一些信息和参数，点击Generate Font就会生成字体图标：

fonts就是需要的字体文件，style.css就是需要在项目中使用的字体图标的css代码了
注意：
图标最好是单色的，上面的图标在iconMoon上显示不是单色，生成的字体图标的格式会有问题，所以就把颜色都变为黑色了

使用@font-face应用字体图标

使用上面生成的图标，效果如下：

代码如下：

总结

今天从零开始去打造字体图标以及如何使用，平时项目中使用的iconfont或者font-awesome都是类似，但是它们细节处理地更好，如果你感兴趣可以深入研究。