手机端字形图标解决方案——icomoon

在手机端网页开发中，由于扁平化设计的流行，以及设备屏幕越来越细腻高清，“小而精”的字形图标逐渐成为手机端页面的标配。
那么如何高效，便捷的管理使用自己项目的图标呢？
抛砖引玉，下面笔者介绍下如何通过 icomoon 这个强大的字形图标网站管理自己项目的图标库。

为什么是 icomoon

使用一年多来，尚未找到比它更好用的图标网站了。

• 优点
  1. 支持上传自定义图标，包括多色块图标
  2. 当然，你也可以挑选线上他人共享的图标
  3. 支持在线对图标进行编辑
  4. 将所有选择的图标合成一个图标文件，类似“雪碧图”功能，并可以本地预览。
• 缺点
  1. 图标可以保存该网站的云端上，不过这是一个付费服务。（如果没有开启该服务，你在该网站上收集或者上传的图标会自动保存在浏览器的缓存中，这极大的方便了图标管理，但终究有误清缓存的隐患，所以笔者强烈建议，如果你没有开启该服务，可以将生成的图标压缩包保存在其他免费云端上，比如coading，github，云盘，有道云笔记等等）

如何开始

很多时候，为了统一网站风格，字形图标需要设计师同学通过AI或者PS来制作，然后导出一个SVG文件。（一般来讲，制作图标的时候，如果没有特殊需求，图标颜色是纯黑色(#000)的，画布是一个正方形，图标与画布水平垂直居中，并且图标边缘与画布上下边界或者左右边界贴边。）

1. 这个SVG文件可以直接用浏览器打开预览，然后我们把图标传上去(上传后，如果图标异常，说明制作有问题，需要设计师重新制作），
   如果图标不符合规范，比如没有水平垂直居中，没有贴边等，我们可以在线修改使其符合要求。
   

   

   step-1.gif

2. 当然，我们也可以上传多色图标以及挑选一些别人共享的免费图标
   

   step-2.gif

3. 选择好图标后，可以在线生成我们的图标文件了（一个包含本地预览的压缩包，解压后打开文件中的 demo.html 即可本地预览）
   

   

   step-3.gif

4. 解压之后，把文件夹 fonts 以及 style.css 复制到我们的项目中，一般使用 i 标签，通过添加图标类名，即可渲染出对应图标
   

   step-4.gif

5. 如果要渲染多色图标，比如本次演示使用的红包图标，在生成的字形类名中，与其他或字形类名相比，它多出若干子类名，path1，path2，path3等，根据子类名的数量，你需要在红包标签中引入相应的子标签（笔者习惯使用span，注意，子标签不要换行，否则图标异常）
   

   step-5.gif

6. 最后，如果你清除了浏览器缓存，并且你未购买网站的云服务，那么当你再次访问该网站时候，你辛苦收集的图标将不复存在。怎么办呢，你可以通过导入之前字形文件中的 selection.json 来完美（如果你的图标库全部是单色图标，也可以导入fonts 中的 svg 文件，如果包含多色图标，则必须导入 selection.json 才能完美恢复）恢复到线上。所以，再次声明，如果你未购买该网站的云服务，一定要把生成的字形图标压缩包保存到其他免费云盘中
   

   

   step-6.gif

结语

• 虽然图标支持多色块，甚至渐变，但是依旧 建议适当使用多色，避免使用渐变。（笔者曾遇到过设计师同学制作了一个超炫酷的图标，各种颜色，渐变，竟然有300k之巨），如果单个图标 svg 文件超过20k，就应该考虑做成 png 了。
• 这个网站其实还有很多辅助功能，这里不再赘述，大家自行探索，欢迎讨论交流。