两套完美的图标解决方案

图标

图标指具有指代意义的图形符号，具有高度浓缩并快捷传达信息、便于记忆的特性。在软件开发中，不管是web开发、桌面应用程序开发以及APP开发中，都离不开图标。

本文给大家介绍两种市面上比较好的图标解决方案：Font Awesome字体图标库以及阿里巴巴矢量图标库。

虽然网上还有其它可以下载图标的地方，但是不推荐大家使用，原因有三：
【1】不是矢量图片，放大后会失真。
【2】需要收费。
【3】不成体系，东拼西凑的图标会大大降低可视化效果。

---

Font Awesome字体图标库

01 介绍

Font Awesome是一套可缩放的矢量图标库，可以使用CSS属性更改图标大小、颜色、阴影或者其它任何支持的效果。目前常用的Font Awesome版本是4.7版本，新版本已更新到Font Awesome 5.x版本。

02 使用步骤

特别注意：Font Awesome从3.X、4.X到5.X版本，每次升级，包括图标数量、CDN地址以及图标的使用方式都会发生特别大的变化，所以使用前特别注意您使用的是哪个版本，此处我演示时使用的是最新版本5.11，如需使用4.x版本，则官网地址为：http://fontawesome.dashgame.com/#basic

步骤一：引入css资源

方式1：cdn引入

方式2：css下载到本地，标签引入

步骤二：在官网中查看图标样式，并引入到标签中

如打开 Font Awesome 5 官网，即可看到所有图标，如下图

Font Awesome 5

以上图中第一排左二的'笔记本'图标为例，

---

阿里巴巴矢量图标库

阿里巴巴矢量图标库中，是阿里巴巴官方使用的图标库，与Font Awesome相同的是，该网站中的图标都是矢量图标，放大后不会失真；不同的是，这些图标是svg格式的图片，不能使用CSS改变颜色，需要在下载时候手动选择颜色。

阿里巴巴矢量图标库

使用方式：下载图片，在HTML中引入即可

---

根据我自己的使用情况来看，Font Awesome字体图标库以及阿里巴巴矢量图标库都有非常好的使用效果，阿里巴巴矢量图标库的使用方法比较简单，下载图片后用标签引入即可；下一篇文章，我将详细解读Font Awesome 4 以及Font Awesome 5,敬请期待......