二十多个PNG图标占1MB加载慢，换矢量图标库只传用到的，本地加载稳定

新手做网站，所有图标都是自己切的PNG图，每个图标都是几十KB的图片，做个功能按钮，要传好几个图标文件，网页加载一堆小图片，速度慢，其实用矢量图标库，一个字体文件全搞定，清晰还加载快。

首先，矢量图标库就是把所有图标做成一个字体文件，你用CSS代码就能显示想要的图标，不管放大多少倍，图标都不会糊，在高清屏手机上也特别清晰，比PNG图清楚。而且整个图标库一共几百KB，你网站用了几十上百个图标，只需要加载这一个字体文件，比每个图标单独传PNG快多了。我之前客户的网站，二十多个功能图标，全是PNG，加起来1MB多，换成矢量图标库，整个图标文件才100KB，加载速度快好多。

新手最容易踩的坑，是把整个图标库的文件全传上去，其实你网站只用到了十几个图标，整个库几百KB，其实可以只把你用到的图标打包，生成一个几十KB的小字体文件，加载更快。很多新手直接引全量图标库，浪费带宽，在线工具里选自己用到的图标，生成一个小的字体包就够。

还有，别用那种需要联网加载的图标CDN，CDN挂了，你网站上所有图标全变成方块，本地把图标字体文件传到自己服务器，自己加载，稳定不依赖第三方服务。我之前用CDN的图标库，CDN那天挂了，网站所有图标全裂了，换成本地图标文件之后，再也没出过这个问题。

别小看图标，网站上到处都是小图标，用矢量图标库，清晰、文件小、加载快，比一堆PNG图方便太多，还不糊。