字体图标怎么用（字体图标的好处）

科技前沿 • 2025-06-13 19:11 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

hi，设计师们！你们在设计web或APP项目时，会把切图以什么格式给到开发？

SVG ？  不同倍数的png ?

1，页面已打开，可图标还没加载出来？

2，web页面，1920分辨率，100%时icon清晰，调到125%后，图标变模糊了？

3，做hover时，前端跟你吐槽，说svg做hover很麻烦，希望你给字体图标？

那么问题来了：什么是字体图标？又怎么制作呢？

你以为的字体只是文字？ No，No，No，它也可能是一张图！

简单的说，字体图标就是把我们的图标，从图像格式转换成了字体格式，从而赋予它像字体一样的属性。

2，灵活性：拿图标为例
讯享网

原来：14px,20px,需要各切图一张现在：前端将删除字段的 font-size:14px 改为 font-size:20px就ok了

原来：黑色，蓝色删除icon需要各切图一张现在：前端将删除字段color : # 改为color : #0086ff 就ok了

原来，透明度50%，80%需要各切图一张现在：前端将删除字段 color：rgb(100 100 100 / 0.5)

改为 color：rgb(100 100 100 / 0.8) 就ok了

3，兼容性：网页字体支持所有浏览器，包括IE低版本。

如果你上传iconfont时，icon预览显示一个黑块或显示不正常，那么请重新看下 2-导出前的6个注意事项

2，下载字体包到本地，再传给开发

可以查看-使用帮助，里面有介绍引用的方法。

1，先要安装一个插件 - kitchen

2，我的项目 > 2. 选择自己的项目 > 3. 选择icon尺寸的大小 > 4. 把图标直接拖动到画布上即可以使用

3，点击右下角-我的项目，可以直接跳转到iconfont我的项目

1，kitchen > 图标 > 取消授权

2，在kitchen面板里 > 授权登录iconfont  > 再登录就OK了

1，用iconfont做字体图标库，UI设计师离职时，要记得把iconfont 该项目的管理权限，和图标sketch源文件一起移交给下一位设计师，否则，以后就维护不了咯！

2，拓宽一下：在微信输入框中，输入“开心”，你会发现啥？是不是在让你选择的词汇中出现了😄的身影？

     那么，其实😄也是字体图标哦 

 … END

好啦，今天的分享就到这啦！ 

婷婷不才，如哪里讲的不对，请各位大神指正！

另外，我会陆续把自己总结的设计方法、心得感受写成文章，分享给大家，若感兴趣，可以关注我哟

                                                              嘿！别忘点赞哦~