在手机端网页开发中，由于扁平化设计的流行，以及设备屏幕越来越细腻高清，“小而精”的字形图标逐渐成为手机端页面的标配。
那么如何高效，便捷的管理使用自己项目的图标呢？
抛砖引玉，下面笔者介绍下如何通过 icomoon 这个强大的字形图标网站管理自己项目的图标库。
为什么是 icomoon
使用一年多来，尚未找到比它更好用的图标网站了。
- 优点
- 支持上传自定义图标，包括多色块图标
- 当然，你也可以挑选线上他人共享的图标
- 支持在线对图标进行编辑
- 将所有选择的图标合成一个图标文件，类似“雪碧图”功能，并可以本地预览。
- 缺点
- 图标可以保存该网站的云端上，不过这是一个付费服务。（如果没有开启该服务，你在该网站上收集或者上传的图标会自动保存在浏览器的缓存中，这极大的方便了图标管理，但终究有误清缓存的隐患，所以笔者强烈建议，如果你没有开启该服务，可以将生成的图标压缩包保存在其他免费云端上，比如coading，github，云盘，有道云笔记等等）
如何开始
很多时候，为了统一网站风格，字形图标需要设计师同学通过AI或者PS来制作，然后导出一个SVG文件。（一般来讲，制作图标的时候，如果没有特殊需求，图标颜色是纯黑色(#000)的，画布是一个正方形，图标与画布水平垂直居中，并且图标边缘与画布上下边界或者左右边界贴边。）
-
这个SVG文件可以直接用浏览器打开预览，然后我们把图标传上去(上传后，如果图标异常，说明制作有问题，需要设计师重新制作），
如果图标不符合规范，比如没有水平垂直居中，没有贴边等，我们可以在线修改使其符合要求。
step-1.gif
-
当然，我们也可以上传多色图标以及挑选一些别人共享的免费图标
step-2.gif
-
选择好图标后，可以在线生成我们的图标文件了（一个包含本地预览的压缩包，解压后打开文件中的 demo.html 即可本地预览）
step-3.gif
-
解压之后，把文件夹 fonts 以及 style.css 复制到我们的项目中，一般使用 i 标签，通过添加图标类名，即可渲染出对应图标
step-4.gif
-
如果要渲染多色图标，比如本次演示使用的红包图标，在生成的字形类名中，与其他或字形类名相比，它多出若干子类名，path1，path2，path3等，根据子类名的数量，你需要在红包标签中引入相应的子标签（笔者习惯使用span，注意，子标签不要换行，否则图标异常）
step-5.gif
-
最后，如果你清除了浏览器缓存，并且你未购买网站的云服务，那么当你再次访问该网站时候，你辛苦收集的图标将不复存在。怎么办呢，你可以通过导入之前字形文件中的
selection.json来完美（如果你的图标库全部是单色图标，也可以导入fonts 中的 svg 文件，如果包含多色图标，则必须导入 selection.json 才能完美恢复）恢复到线上。所以，再次声明，如果你未购买该网站的云服务，一定要把生成的字形图标压缩包保存到其他免费云盘中
step-6.gif
结语
- 虽然图标支持多色块，甚至渐变，但是依旧 建议适当使用多色，避免使用渐变。（笔者曾遇到过设计师同学制作了一个超炫酷的图标，各种颜色，渐变，竟然有300k之巨），如果单个图标 svg 文件超过20k，就应该考虑做成 png 了。
- 这个网站其实还有很多辅助功能，这里不再赘述，大家自行探索，欢迎讨论交流。
网友评论