本章主要讲解如何建立图标库，并在 Uniapp 中应用字体图标。
我们在做项目的时候，使用的图标会很多，全都以图片形式加载的话，整个文件体积会变得非常大，不仅会增加额外的 http 请求，还会有图片放大后失真的问题，在小程序开发当中，整个小程序所有代码量大小不超过 12M。如果没有很合理的运用与优化，加载速度也会大打折扣。
# 为什么要使用字体图标
- 字体图标是矢量图标，可进行无限缩放不失真，一旦字体加载了，图标就会马上渲染出来，不需要下载一个个图像
- 加载字体图标无需 http 请求，字体图标体积更小，相较图片加载速度更快
- 兼容性方面，字体图标支持现代浏览器，甚至是低版本的IE浏览器
- 可以像页面中的文字一样，通过 font-size 属性来对其进行大小的设置，而且还可以添加各种文字效果，如 color、hover、filter、text-shadow、transform 等效果
这里安利我常用的字体图标库，Iconfont-阿里巴巴矢量图标库-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
# 使用 iconfont 图标库
在阿里图标库里，可以找到非常多各式各样的字体图标，并且可以私人上传定制图标库，与团队协同开发管理图标。首次登录需要先捆绑账号，支持github及新浪微博快捷入口登录。登录后点击【图标管理】>>【我的项目】进入项目页面：
进入页面点击右侧紫色的添加图标新建一个项目，点进出现弹窗，在弹出的弹窗中填好项目名称及项目描述，然后点击新建：
回到图标库，在搜索框中输入自己想要的图标，并鼠标悬浮到具体图标中，点击购物车（添加入库），此时你的购物车会添加1：
找到所有想要的图标并添加进购物车后，点击右上角购物车的图标，将购物车里的图标添加至项目，选择刚才新建的项目：
回到我的项目页面，点击下载至本地按钮，解压即可：
# 在项目中使用 iconfont
第一步，解压文件
将上面下载的文件解压缩后可以看到以下内容，woff，woff2，ttf，eot后缀名的等都是字体文件：
查看 iconfont.css 样式表中如何引用这些字体文件，并且可以清楚知道，引用了四个字体文件加上一个svg文件：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1573520590765'); /* IE9 */
src: url('iconfont.eot?t=1573520590765#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d0...') format('woff2'),
url('iconfont.woff?t=1573520590765') format('woff'),
url('iconfont.ttf?t=1573520590765') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1573520590765#iconfont') format('svg'); /* iOS 4.1- */
}
第二步，引入文件
将上面提到的5个文件放入到新建文件夹 common/css 中，放在这里的原因是字体属于全局文件，可以统一管理：
要想在所有页面上生效，就要在 App.vue 引入：
<!-- App.vue -->
<style>
/*每个页面公共css */
@import './common/css/iconfont.css';
</style>
注意：引用字体文件的时候注意使用相对路径，避免查找失败。
第三步，在页面中使用
<template>
<view class="content">
<view class="iconfont">
