小程序添加svg

原因

小程序的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文件,需要显示的地方添加