uni-app使用iconfont爬坑记录

素颜马尾好姑娘i 2021-08-19 22:46 403阅读 0赞

# uni-app使用iconfont爬坑记录 #

## 获取iconfont ##

登录[阿里巴巴图标库][Link 1],选择需要使用的图标,加入到购物车中  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70][]  
进入购物车中,选择添加至项目.没有项目的话自己随便建一个就行.下次从图标管理tab下可进入我的项目页面.  
我的项目如图:  
![我的项目][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70 1]

**点击下载至本地**

## 非微信小程序使用 ##

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

## 微信小程序使用 ##

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

## 参考文章 ##

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

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

[Link 1]: https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70]: /images/20210726/01e817135b0044eb8ddff36db9efb41d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MDk3Mw_size_16_color_FFFFFF_t_70 1]: /images/20210726/d5384fc4cadd41729dd731a2e6bc5c9f.png
[uni-app_iconfont]: https://ask.dcloud.net.cn/question/57433
[iconfont]: https://www.jianshu.com/p/28a8056ce50c
[uni-app]: https://blog.csdn.net/XiaoYi0215/article/details/84775982