uni-app之引用阿里字体库

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-*

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-*

8、注意：

为什么手机端不能显示图标？？？

（1）因为uni-app引用线上的图标时，要用绝对路径，需要带https://【参考上面的 7-1】
（2）由于uni-app的@问题【@开头的绝对路径以及相对路径会经过base64转换规则校验，所以需要将 线上的阿里字体库的字体格式 添加上 Base64】

@符号

字体格式