您现在的位置是：网站首页> 编程资料编程资料

图文实操详解前端处理小图标的那些解决方案_心得技巧_网页制作_

2021-09-11 820人已围观

简介在前端日常开发中，小图标是必不可少的，我们该如何高效的处理小图标是每位前端人要考虑的，下面这篇文章通过图文实操给大家详细介绍了关于前端处理小图标的那些解决方案，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。

前言

在开始本文之前，我们先做一个选择题：前端开发使用构建工具的目的是什么？

A、因为现在流行node.js，都在使用构建工具

B、让前端开发变得高大上，和后端一样编译才能运行

C、让自动化工具替代重复的手工操作，比如合并代码，刷新浏览器预览效果等。

选择A、B请直接关闭此文，选择C请继续阅读。

其实使用工具的目的就一个： 自动化一些重复操作，提升工作效率。ok，明确了这一点之后再来探究有哪些方式，可以把一堆小图标合并成一个图片文件并生成相应的样式。

按照生成文件和使用方式来看，可以大致分成3类处理方式：

png sprite

合成雪碧图是历史最悠久最成熟的解决方案，把不同的png小图标拼接成一张png图片。

手动操作

有的公司甚至让UI设计师来合并小图标（UI设计师成了自动化工具，