字体图标(font-icon),你还有什么理由不使用它?

优点

下面的简介来自,著名字体图标库Font Awesome的首页,http://fontawesome.io

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Font Awesome 或者其他字体图标能提供可以直接使用CSS修改的可缩放的矢量图标,可以修改的内容包括图标的大小、颜色、阴影等这些CSS的力量能做到的一切。

简单来说优点有:

  • 矢量(无限缩放、高清)

  • CSS样式(通用、灵活)

  • 体积更小(快速)

  • ......

缺点

这些可能是项目没用上字体的图标的一些原因,并不完全是字体图标的缺点:

  1. 库(Font Awesome......)太大了

  2. 不能完全符合设计稿

  3. 兼容性、可访问性

  4. 太麻烦,还是之前切图片图标方便

  5. 历史项目,改动成本太高

解决方案or分析

库(Font Awesome......)太大了 & 不能完全符合设计稿

方案一

使用字体图标编辑器修改字体图标库,参考图标字体(IconFont)制作这篇文章中提到的软件FontCreator去编辑字体图标库的某个字体文件,重新转化生成。删除大量用不到的字体图标后,图标库的体积会大大缩小。

方案二

方案一略麻烦,不推荐。我们其实可以自己做字体图标库,参考ICONFONT平台功能介绍、可能更好用的IcoMoon App。自己制作字体图标的时候有需要注意这些:

  • 阿里图标库ICONFONT的图标多,免费但是编辑器不如IcoMoon好用。不过可以从阿里图标库下载SVG图标再导入IcoMoon中制作。

  • 建议设计师对于一些常用图标直接去阿里图标库找,下载SVG文件即可。对于实在找不到的图标才自己动手做,使用Ps、Ai、Sketch等做出符合字体图标标准的SVG即可。最好除了图标本身外不要有多余的细节如边距、背景等,这些都会用CSS写。前端拿到一套SVG后自己去制作成字体图标即可。

  • SVG图标上传到图标制作平台后,还需要做简单调整包括默认大小、位置、对齐等。整个公司可以按照一个统一标准调整这些SVG。如果是IcoMoon的话,调整完毕后记得把SVG再下载下来,好好保存(给设计部发一份),之后会很通用。而且IcoMoon非白金会员的话是无法在线存储的。

简单图标在设计阶段就无需自己设计,复杂图标也可以导出SVG制作成通用的字体图标,不但能还原设计稿,还可能效率更高。

比如,某设计的不会画图标,于是TA在阿里图标库把PNG的图标下载下来,然后在Ps里做视觉稿,然后前端切图小弟又从PSD中把图标切出来,xx.png,[email protected],有时候这些图标竟然还自带背景色......

比如,某设计会画图标,于是把通用图标画了个遍,然后切图......

只能说:

这是个不怎么追求效率的时代

兼容性、可访问性

兼容性

字体图标是基于WebFont来实现的,WebFont的兼容性请看,caniuse WebFont
再提供多种格式的字体的前提下,兼容性完全不是问题。

可访问性

国内很少关注这个吧,其实Font Awesome提供了相关的说明,请看,Accessibility

太麻烦,还是之前切图片图标方便

其实直接切出图标,如Sketch可以直接导出多种大小的图标。配合各类打包工具如Webpack,可以把小图标转化成base64代码。从某种意义上来说确实挺方便,而且也支持Retina,也挺小。

其实这方案也行,不过,最重要的是可以把切图标的工作抛给设计师吧......

有时候根本不考虑Retina了,不考虑响应式,不考虑移动端了,不考虑......,总之先把项目赶出来。

历史项目,改动成本太高

有些项目确实是前辈没有考虑到用字体图标,或者那时候还没有这种技术。

但是有些最近的项目,那非常可能是前辈挖的坑,区别是有意无意吧。不过大多数都不是故意的。赶而已,懒而已。

更多 & 参考

其他

可以告诉我你不用字体图标的理由吗?有些兼容、缺陷可能未能列举出来,见谅欢迎补充。

我不用字体图标,我用kaomoji:(☆_☆)和emoji: ?

相关推荐