为什么一定要用iconfont图标？

2022年的第002篇

距离2022年100篇原创目标还剩098篇

每一次的转角，都是新的自己

上篇文章咱们聊了一下Figma设计的图标上传iconfont出现的问题，后面通过「Fill Rule Editor」这个插件很好地解决了

咱们开头先啰嗦几句，把事情的前因给捋捋

新做的一个项目，其中一个需求就是大部分图标需要上传到iconfont上

当时没有一下子就同意

咱们可以先来算笔账，一个项目少说也有五六十个图标，就算只上传一半，一个操作1分钟，这就是半个小时的时间

这还是预估图标和时间，实际可能不止

后面开发对这个需求还挺迫切的，于是乎当时就多问了一句“什么原因？”，对方的回答在我看来是比较含糊的

虽然没有得到较为准确的回复，但也大差不差的能够理解，也就同意了

没有一开始就同意是因为我心中存在疑问，我最开始的看法就是用PNG、SVG这两种格式就够了

因为就像前面所说的时间问题，这是必须考虑的一个前提

这不，折腾几个问题出来了，不过总的来说还是值得的

还有一点值得说下，我是比较鼓励当时如果不是很了解需求或者心中有疑问，就应该当时就要提出来

不要纠结，问了怕这个怕那个，其实有时候多问一句是为了更好的理解，相对而言只有你把需求和问题整明白了，效率和准确度才能更高

不要知其然不知其所以然

其实有的时候协作也就是这么一回事了

啰嗦了几句，咱们回到问题，为什么一定要用iconfont图标

那么首先我们就得知道用iconfont的场景以及它的优势在哪

通过网上冲浪，总结了6点

1、图标缩放不失真，颜色可随意更改

2、节省流量，字体图标相比于图片图标体积可以更小

3、减少请求次数，一个css文件可包含所有的图标

4、减少大量使用图片，从而节省代码量，降低维护成本

5、设计不需要提供多个场景图标，只需要维护一个项目图标库就行

6、开发效率高，网页刷新快

了解了iconfont的优势和场景，也丰富了个人的知识面，从而提高自己的专业度

碰到一个问题那就解决一个问题

之前对PNG、SVG、iconfont都是比较表面的了解

但是通过此次之后有了更深入的理解

比如：把iconfont这个名称拆解开就是icon+font，意思就是字体图标

而开发要用iconfont图标

其实关键在于使用场景的不同，如果图标需要换肤，开发会优先选择字体图标

而图标上传到iconfont更便于管理图标和使用图标，一个链接就可以了，这就是高效

但是话说回来，开发那边是效率了，但是设计的工作量却增加了

不过在我看来这就是有效的协作，这种取舍是值得的

同时也是为自己的设计负责

之后看了那些用图片格式的图标是真难受，屏幕大的话就会显得有一些模糊

如果你也跟我一样喜欢折腾，不妨可以考虑一下，比较重要地方的图标，都可以先考虑一下字体图标

实战才是更高效的学习

写在最后

实战才是更高效的学习

有些不理解的不要着急否定，也不要急着肯定，要学会把问题场景给整透彻了

而我们的知识面，也正是由这一个个的知识点连接起来的