这次的文章我想简单地写了一下，只是为了自己能快速想起，快速运用。

 

 

把图标上传到icon font,我相信很多企业都不会这样用，一来是麻烦，设计师工作量多，前端开发也工作量多，但是这样做的好处是，做出来的产品质量清晰，品质也好。

iconfont怎么用呢？

1，通常是设计师设计稿做出来，画的图标，保存SVG格式，然后上传到iconfont上面自己的项目中去。

2，也可以从iconfont下载图标直接使用到设计稿中，同时保存好图标文件，项目定稿好，把图标上传到iconfont上自己的项目中去。

3，上传后，前端开发可以直接去iconfont调用代码，非常的方便，他们可以自己改图标大小，颜色，等等各种参数。

我的经验：

1，用AI做过SVG图标，

2，也用sketch做过SVG图标

3，同时也用fi’g’ma做过SVG图标

遇到问题：有时候在设计中，为了图标统一，整个项目我们会自己画，画完后因此就要导入SVG格式，再上传到iconfont中，我经验虽然有，但是还是不熟练，总是会出现各种问题，比如：上传不成功等情况，要么就是上传不完整。那么前端开发工程师就不能用，

解决方案：

历经了一下午的时间，终于找到了方法解决。使用fi'g'ma画图标。

1，图标画好了后，把它们转为轮廓

 

2，再把他们合并起来

 

3，再然后全选拼合所选项

 

4，打开插件CMD+?键 fill rule editor

 

选图标图层，到这个蓝色部分

5，导出SVG格式

 

6，上传到iconfont上面

 

这种状态就是上传成功，程序员才能使用。