uni-app如何正确引用iconfont字体图标

如何在uni-app中正确的引用字体图标库？？？

• 我们以阿里图标库为例 下载地址
  1.创建项目
  

  2.选自己所需要的图标加入项目
  

  3.下载iconfont图标资源
  

• 在项目中使用字体图标，如果需要全局使用需在App.vue中引用
  1.新建文件夹放入字体图标资源

2.引用字体图标

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210225165138672.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTk0MDc0,size_16,color_FFFFFF,t_70#pic_center)

• 引用图标报错解决（项目实测）

  使用本地路径图标字体需注意：

  1. 为方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
  2. 字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
  3. 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

  

  解决方案一：

  ​ 该方案使用绝对路径引用字体资源
  ​ iconfont.css修改前
  ​

  修改后
  

  解决方案二
  删除不必要的引用资源，修改后
  

  解决方案三
  使用网络资源解决，减少自身项目体积，提高项目运行速度

各位看官觉得对您有所帮助，请帮小的点个赞