UI姑娘在PS里面画好的图标，前端拿下来要么是 .jpg 格式要么是 .png 格式，当然也有 .gif 或者别的你们喜欢的格式。在html页面制作时，用引入图标的方式，做图标。一般可点击的按钮，其图标有选中状态和普通状态，那就有两种颜色，那么同一个图标就要准备两个图片，然后合并成一张图，减少请求次数 ====
时间久了，我就嫌烦了；
我也会用iconfont字体图标，毕竟方便好用，改色改大小，秒秒钟完成。可是，画图的人画的图标总是有她自己的腔调，我的UI也是在iconfont里面找到对应的图标，下载时选择 .png 格式，导入ps再追加她觉得好看的元素进去。这样我就没法在iconfont找到一模一样或者十分接近的图标直接下载使用。
可是，为了解放生产力。我还是寻到了一个解决方案，也是抄袭别人的网上教程，但是我每次看到别人的教程总是觉得不够详细，这也是我重复写下这份文档的原因。
注意事项：我这里用到的字体图标只支持单色图标，就是一个图标的所有线条都是同一种颜色，我没有研究彩色图标的实现，iconfont官网有彩色图标的介绍，然而，我并没有仔细研究。
字体图标适用场景：可能需要改色的，整个项目里图标数量繁多的，适用于单色纯色图标的。
第一步，取素材。
从PSD设计图上取下素材，png格式透明底的图片；
打开 https://www.vectorizer.io/ 这个网站相当卡（我公司网络一般，所以开了半天），需要耐心等待网站完全开好
打开网站后，找到页面中间靠左位置的 Upload Images 蓝色底白色字的按钮，点击上传图片，然后看到右侧预览图片下方有几个按钮，找到一个 Download 蓝色底白色字的按钮，然后你就得到了你的svg素材。
第二步，打开iconfont官网找到上传入口，上传你在第一步获得的svg文件，然后添加到项目啊什么什么的就可以下载资源包了，字体图标就完成了。目前我只是简单测试，基本走通了流程，还没有实际运用的实际项目中。
关于第一步，注意，如果你没有找到我说的那些按钮什么的，那绝对是你网络卡，网页没有完整打开。我也发现打开网页卡，上传图标转换的过程也比较卡，也比较耽误时间。至于是否用这种方式，看你取舍吧。
网友评论