uni-app 引入本地iconfont

直接将阿里矢量图库下载下来的文件加入到库中是无法使用的,编译时会报错,这是因为小程序中无法引入外部图标库
正确的引入方式是,先将iconfont库进行转换,转换成base64编码之后再进行引入
1.从阿里矢量图库下载图标库文件(工程中实际只要使用到iconfont.css文件,其他文件无需加到工程目录下)

image.png

2.上传tff文件,转换成base64

转换网站: https://transfonter.org

image.png

下载后的压缩包进行解压,文件如下

image.png

打开css文件,复制这一行到工程下的iconfont.css文件下

image.png

其他的都可以删除,把刚刚复制的一行粘贴进来,最后的format可以改成turetype

image.png

使用:

在App.vue文件中根据文件路径引入iconfont.css文件即可使用

image.png

index.vue:

image.png