1、阿里字体库的网址:https://www.iconfont.cn/
2、选择微博账号登录
3、开始挑选图标到购物车
4、编辑图标
5、下载阿里字体库
6、生成的阿里字体库在本地项目
需要“iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2”
6-1、将iconfont.css放在css文件夹,iconfont.ttf、iconfont.woff、iconfont.woff2放在font文件夹
6-2、在app.vue开始引用
@import "static/icon/iconfont.css";
6-3、icon在vue页面里面的用法
用法:iconfont md-*
<text class="iconfont md-send"></text>
7、生成的阿里字体库在线上项目,即https://www.iconfont.cn/
7-1、在app.vue开始引用 阿里的线上图标
@import "https://xx.xxx.com/t/font_2587123_pc3v4gq3xw.css";(正确写法)
//@import "//xx.xxx.com/t/font_2587123_xgqhxzw6qbo.css";(错误写法)
7-2、icon在vue页面里面的用法
用法:iconfont md-*
<text class="iconfont md-send"></text>
8、注意:
为什么手机端不能显示图标???
(1)因为uni-app引用线上的图标时,要用绝对路径,需要带https://【参考上面的 7-1】
(2)由于uni-app的@问题【@开头的绝对路径以及相对路径会经过base64转换规则校验,所以需要将 线上的阿里字体库的字体格式 添加上 Base64】