uni-app使用iconfont爬坑记录

uni-app使用iconfont爬坑记录

获取iconfont

登录阿里巴巴图标库,选择需要使用的图标,加入到购物车中
uni-app使用iconfont爬坑记录_第1张图片
进入购物车中,选择添加至项目.没有项目的话自己随便建一个就行.下次从图标管理tab下可进入我的项目页面.
我的项目如图:
uni-app使用iconfont爬坑记录_第2张图片

点击下载至本地

非微信小程序使用

  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字体图标使用

你可能感兴趣的:(爬坑之旅,点滴DayUP,UNI-APP,uni-app,iconfont,微信小程序,iconfont,字体图标,阿里巴巴图标库使用)