美文网首页
小程序添加svg

小程序添加svg

作者: ROBIN2015 | 来源:发表于2017-10-30 16:39 被阅读6717次

原因

小程序的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>

相关文章

  • 小程序添加svg

    原因 小程序的wxss文件的font-face的url不接受http地址作为参数 解决方法 小程序的wxss文件接...

  • vue-cli3中新添加svg-sprite-loader和fi

    添加svg-sprite-loader和file-loader本来只添加svg-sprite-loader就行了,...

  • 微信小程序06:svg的使用

    资料 微信小程序开发之SVG的使用 操作步骤 1.下载svg或者是制作了svg 目前,我是直接从网上copy了一段...

  • 微信小程序06:svg的使用

    资料 微信小程序开发之SVG的使用 操作步骤 1.下载svg或者是制作了svg 目前,我是直接从网上copy了一段...

  • SVG学习笔记

    SVG学习笔记 简介 SVG使用XML来描述二维图形和绘图程序的语言。 SVG形状 SVG在HTML页面 SVG ...

  • 小程序-引入本地图片

    Q1:背景:此前开发中,html文件用了很多嵌入式的svg标签,小程序的svg标签不能使用。且background...

  • 代运营添加小程序菜单

    1、在代运营公众号中添加要增加的小程序 注意:添加AppID需要小程序授权 2、公众号中添加小程序成功后,可在sa...

  • Webpack配置svg-sprite-loader处理svg图

    在components新建SvgIcon.vue 在src/icons/svg里添加svg文件在src/icons...

  • 小程序加载svg图片

    前言 小程序的组件中是没有支持SVG标签的。但是在前端小伙伴的实际开发中,UED经常提供SVG图片过来,如果不想用...

  • D2 日报 2019年4月18日

    ? 新闻 ➡️ 今天,小程序正式支持 SVG juejin.im ➡️ Facebook:公司曾「无意中上传」...

网友评论

      本文标题:小程序添加svg

      本文链接:https://www.haomeiwen.com/subject/pahvyxtx.html