引言
在实际项目中，过多的使用图片，有可能会导致页面加载速度过慢，但是，我们可以使用 iconfont 来展示图标，它是一种用字体文件取代图片的解决方案。
主题：使用 iconfont 图标
在项目中使用 iconfont
我们可以在项目中引入阿里巴巴矢量图标库。官网：iconfont.cn
进入首页，我们可以在搜索栏中模糊搜索我们需要的图标，也可以点击导航栏的 “图标库” 进行选择：
iconfont 首页
现在，我们看看如何在项目中引入。
首先，我们先要登录 iconfont.cn ，然后创建项目，依次点击导航栏 “资源管理” -> “我的项目” ：
登录后选择我的项目
在项目管理页，可以看见现在我们还没有项目。
点击右侧紫色圆形按钮添加一个项目，在弹出添加项目窗口时只填写项目名和简要的项目描述，项目名可以和我们本地项目同名：
添加项目
此时，项目创建好了，还没有图标，我们分别选择几个图标并添加到创建的项目中：
选择图标并添加到项目中
从选择图标到添加到项目，经历了下面几个步骤：
- 选择合适的图标，然后点击图标上的 “购物车” 按钮
- 图标选完后，在右侧悬浮或顶部的 “购物车” 按钮上会显示共选择了几个图标
- 点击右侧悬浮或顶部 “购物车” 按钮，弹出已选择的图标列表
- 点击 “添加至项目” 按钮，并选择项目，然后点击 “确定” 按钮，添加成功
在 iconfont 中应用 Symbol 元素作为引用去使用图标，是一种全新的使用方式，也是 iconfont 平台目前推荐的用法。它的优点是：
- 不用下载 iconfont 文件
- 不用修改 iconfont.css
- main.js中不用导入 iconfont.css
- 支持多色图标
但它也有不足：
1. 兼容性较差，只支持 ie9+ 以上浏览器、chrome 等主流浏览器
2. 浏览器渲染 svg 的性能一般，不如 png
所以在做项目前仔细斟酌，用哪一种方案好。
目前来讲比较推荐 Symbol 引用方式。
本期文章也主要以这种方式进行讲解，其它关于 iconfont 的使用方式可以在阿里巴巴图标平台找到详细说明。
现在，我们把 iconfont 引入我们现实的项目中。
首先点击 iconfont 项目页的 "Symbol" 按钮，并点击 “查看在线链接” 按钮生成链接：
选择 Symbol 并点击查看链接
点击 “点此复制代码” ， 如果有新图标加入，此处也会提示更新代码。
进入 public/index.html 文件用