手机端字形图标解决方案——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 了。
  • 这个网站其实还有很多辅助功能,这里不再赘述,大家自行探索,欢迎讨论交流。

推荐阅读更多精彩内容