字体图标(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，xx@2x.png，有时候这些图标居然还自带背景色......

好比，某设计会画图标，因而把通用图标画了个遍，而后切图......

只能说：

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

兼容性、可访问性

兼容性

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

可访问性

国内不多关注这个吧，其实Font Awesome提供了相关的说明，请看，Accessibility

太麻烦，仍是以前切图片图标方便

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

其实这方案也行，不过，最重要的是能够把切图标的工做抛给设计师吧......

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

历史项目，改动成本过高

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

可是有些最近的项目，那很是多是前辈挖的坑，区别是有意无心吧。不过大多数都不是故意的。赶而已，懒而已。

更多 & 参考

• 图标字体化浅谈

其余

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

我不用字体图标，我用kaomoji：(☆_☆)和emoji： ?