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

        <i class="triangle"></i>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容