前言
在前端页面中，经常会有一些小图标，用于说明和引导某项功能。例如京东首页的搜索框与右侧的购物车。
如上图所示，搜索框中「相机」图案表示可以点击使用图片搜索，右侧的「放大镜」图案表示点击进行商品搜索，然后最右侧的「购物车」图案更能说明此处是用户购物车入口。使用这么多图案根本目的还是引导用户，因为相较于文字，人的大脑更容易理解和记忆图案。这是为什么一篇文章如果图文并茂，我们更加容易看完。辩证的看来，图形让我们大脑不费劲的记忆事情，副作用就是大脑变懒了，更加不愿意去思考，这也是我们需要避免的。
sprite图
话再说回来，一开始页面中的icon都是最简单粗暴的使用标签，简单方便。但是如果一个页面上有很多个icon，这样就有很多很多的png文件了，太繁杂臃肿了。我们希望文件更加简洁一点，相同类别的文件被整合在一起。基础这种省事的想法，sprite图方案就产生了，因为sprite就是雪碧的英文，所以也叫做雪碧图。雪碧图的内容就是将页面所有的icon都放到一个png等图片格式文件上，然后通过图片的定位使用特定的icon。但是这样，不利于添加修改icon图片。
font字体库
css本身支持引入字体库，使用@font-face引入自定义的字体库。基于此，我们扩展一下，在上古时期，文字是由图形发展而来的，我们可以将图标字体化，引入一个字体库，但是库里的内容都是常见的图标就好了。自此，使用字体库定义icon图标开始了，但是单一的字体库不适合所有项目的需要，急需多元化的字体库。阿里巴巴的icon-font就此诞生，解决了这个痛点。
阿里的icon-font
阿里的icon-font提供了一个平台，设计师上传自己设计的icon，前端工程师下载适合项目的icon，资源的产生和使用就此动态化了。这也是目前最方面的icon矢量图标的使用了。
首先进入阿里巴巴矢量图标的官网，没有账号的注册一下，然后登录。如下图所示：
接着就可以搜索你想要的图标了，找到后，鼠标放在图标上面出现三个图案，其中购物车是将图标放在建立的项目中，我们可以找到多个图标，一并下载。
选择完图标之后，找到我的项目。
阿里的iconfont提供三种引用方式来引用图标，分别是：1、Unicode。2、font-class。3、symbol。兼容性依次递减，未来主流的方式是symbol。同时字体文件的存储位置也有两种选择，一是官网代为云存储，通过生成的在线链接使用。另一种就是下载字体文件至本地，引用使用。
