直接将阿里矢量图库下载下来的文件加入到库中是无法使用的,编译时会报错,这是因为小程序中无法引入外部图标库
正确的引入方式是,先将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
