uni-app使用iconfont爬坑记录

获取iconfont

登录阿里巴巴图标库,选择需要使用的图标,加入到购物车中

进入购物车中,选择添加至项目.没有项目的话自己随便建一个就行.下次从图标管理tab下可进入我的项目页面.

我的项目如图:

点击下载至本地

非微信小程序使用

1. 将下载后的文件加压后找到iconfont.css文件,拷贝至项目的uni-app页面的style标签中,然后复制我的项目里面的在线链接,替换拷贝的@font-face部分,即可在页面中使用
2. 按照上述方法将iconfont.css文件,拷贝至项目的App.vue页面的style标签中,然后复制我的项目里面的在线链接,替换拷贝的@font-face部分,即可全局使用
3. 对于font class 形式可以直接在style标签中通过@import url("");引入

微信小程序使用

微信小程序直只支持前两种方法

1. 将下载后的文件加压后找到iconfont.css文件,拷贝至项目的uni-app页面的style标签中,然后复制我的项目里面的在线链接,替换拷贝的@font-face部分,即可在页面中使用
2. 按照上述方法将iconfont.css文件,拷贝至项目的App.vue页面的style标签中,然后复制我的项目里面的在线链接,替换拷贝的@font-face部分,即可全局使用

参考文章

内容写的比较杂乱,存在疑惑的可以参考一下文章

1. uni-app如何引入iconfont图标
2. 如何在微信小程序中使用iconfont
3. uni-app字体图标使用