1. 使用字体图标的优点：

1.1 减小打包体积，一些平台如微信小程序等在发布时有体积限制，大量使用静态资源会使得打包体积容易超出限制

1.2 字体图标是矢量的，缩放不失真、模糊

1.3 对比引用多个网络图标，字体图标只需一个css文件即可，因此减少了网络请求次数，同时比下载图片节约流量

2. 在HBuilder X中简单导入iconfont图标库

2.1 新建一个空白的uni-app项目

新建一个空白的uni-app项目test iconfont,Vue版本选择VUE2,默认模板。

项目初始结构如下，VUE版本选择为vue2,默认模块

 

2.2 创建iconfont项目仓库

在iconfont官网找到资源管理下拉菜单中我对项目选项，点击进去后选择右边加号新建项目

 创建好项目后可以在图标商城搜索选择所需要的图标，然后添加到项目

在我发起的项目选择点击生成代码

 点击复制代码下方的连接查看代码

 

3. 在uni-app项目中使用iconfont 图标

3.1在项目根目录下创建common目录，并在目录下创建iconfont.css文件

3.2 将iconfont图标库中生成的代码复制粘贴到iconfont.css文件中，并添加https前缀

 

url('//at.alicdn.com/t/font_xxx') 
url('https://at.alicdn.com/t/font_xxx')

如上所示，这里文件内部url的默认路径规则在app端属于文件协议，因此要在app端正常显示，必须自行补齐前面的协议，否则app无法下载样式。

若内容下载的文件超过40kb,则需要base64转码，可搜索相关的工具网站在线转码iconfont文件

base64转码参考：uni-app引入iconfont字体图标 - 菜鸡H - 博客园 (cnblogs.com)

 在App.vue的