嘿！你还不知道怎么做字体图标吗？
hi，设计师们！ 你们在设计web或APP项目时，会把切图以什么格式给到开发？
SVG ？ 不同倍数的png ?
那你们是否遇到过以下几种情况？
1，页面已打开，可图标还没加载出来？
2，web页面，1920分辨率，100%时icon清晰， 调到125%后，图标变模糊了？
3，做hover时，前端跟你吐槽，说svg做hover很麻烦，希望你给字体图标？
那么问题来了：什么是字体图标？又怎么制作呢？
一，什么是字体图标？
你以为的字体只是文字？ No，No，No，它也可能是一张图！
简单的说，字体图标就是把我们的图标，从图像格式转换成了字体格式，从而赋予它像字体一样的属性。
那么赋予他字体属性后，有什么好处呢？
1，加载快：字体图标 体积比图像小，加载会立即渲染出来。
2，灵活性：拿 
图标为例
改变大小：
原来：14px,20px,需要各切图一张 现在：前端将删除字段的 font-size:14px 改为 font-size:20px就ok了 改变颜色/hover状态:
原来：黑色，蓝色删除icon需要各切图一张 现在：前端将删除字段color : #333333 改为color : #0086ff 就ok了 改变透明度：
原来，透明度50%，80%需要各切图一张 现在：前端将删除字段 color：rgb(100 100 100 / 0.5)
改为 color：rgb(100 100 100 / 0.8) 就ok了
3，兼容性：网页字体支持所有浏览器，包括IE低版本。
二，那么如何制作字体图标？（sketch 为例）
1-sketch里制作图标
2-导出前的6个注意事项
3-导出svg 格式
4-iconfont创建 项目文件夹
5-上传图标
如果你上传iconfont时，icon预览显示一个黑块 或显示不正常，那么请重新看下 2-导出前的6个注意事项
因为：闭合、合并、轮廓化、这些没做好，都会导致图标异常。
三，字体图标做好后，怎么给到开发？
1，把前端加进来，成为成员，前端便可自行下载
2，下载字体包到本地，再传给开发
3，如果是UI设计师要求用字符图标，前端却不知如何使用，咋办？
可以查看-使用帮助，里面有介绍引用的方法。
四、设计师自己如何调用iconfont项目组里的icon呢？
1，先要安装一个插件 - kitchen
2，我的项目 > 2. 选择自己的项目 > 3. 选择icon尺寸的大小 > 4. 把图标直接拖动到画布上即可以使用
3，点击右下角-我的项目 ，可以直接跳转到iconfont我的项目
五、我有两个iconfont账号，kitchen里如何切换呢？
（需要重新授权）
1，kitchen > 图标 > 取消授权
2，在kitchen面板里 > 授权登录iconfont > 再登录就OK了
tips：
1，用iconfont做字体图标库，UI设计师离职时，要记得把iconfont 该项目的管理权限，和图标sketch源文件一起移交给下一位设计师，否则，以后就维护不了咯！
2，拓宽一下：在微信输入框中，输入“开心”，你会发现啥？ 是不是在让你选择的词汇中出现了😄的身影？
那么，其实😄也是字体图标哦~
. . . END
好啦，今天的分享就到这啦！
婷婷不才，如哪里讲的不对，请各位大神指正！
另外，我会陆续把自己总结的设计方法、心得感受写成文章，分享给大家，若感兴趣，可以关注我哟~
嘿！别忘点赞哦~
