原因
小程序的wxss文件的font-face的url不接受http地址作为参数
解决方法
小程序的wxss文件接受base64,需将字体文件下载后,转换为base64,即可引用
步骤
1. 下载图库
在阿里巴巴图标库下载下来,找到iconfont.ttf。
2.转换图库
将iconfont.ttf上传至transfonter (Add Font), 打开"Base64 encode "开关(也可根据需求选择), 之后点击Conver按钮, 转换并下载文件, 解压后找到stylesheet.css
文件
3.添加样式文件
在工程样式表目录下新建svgs.wxss
(名字随意), 并将stylesheet.css
的内容粘贴进去
4. 添加样式
新建iconfont.wxss
文件,内容如下:
@import "./svgs.wxss";
@import "./variable";
.triangle:after {
font-family: 'iconfont';
content: '\e62b';
font-size: @fontsize-22;
}
5.引用文件
在需要的地方引入iconfont.wxss
文件,需要显示的地方添加
<i class="triangle"></i>