微信小程序中使用离线版阿里云矢量图标

前言

阿里矢量图库提供的在线链接服务仅供平台体验和调试使用,平台不承诺服务的稳定性,企业客户需下载字体包自行发布使用并做好备份。

1.下载图标

将阿里矢量图库的图标先下载下来

解压如下

2.转换格式

  1. 贴一个地址用于转换格式:Online @font-face generator --- Transfonter

  2. 将iconfont.ttf上传,就是这里的第一步 Add fonts

  1. 转换玩后下载下来
    解压完成后如下

3.在微信小程序中配置

  1. 新建一个fonts文件夹一个iconfont.wxss文件

  2. 复制矢量图库在线代码

  3. 全选,复制所有内容

  4. 粘贴到iconfont.wxss文件

  5. 替换代码

    打开刚才转换完成的css文件

    全部复制

    替换

  6. 在app.scss中引入,如果你没开启scss,那么就是app.wxss

4.在文件中引用

<text class="iconfont icon-naozhong-copy"></text>

这里的icon-naozhong-copy就是你的图标名字,可以自行替换,但是iconfont不能少

相关推荐
qq_3327835440 分钟前
wx小程序turf.js判断点是否位于该多边形内部
小程序
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
计算机-秋大田2 小时前
基于微信小程序的养老院管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
钰@5 小时前
小程序开发者工具的network选项卡中有某域名的接口请求,但是在charles中抓不到该接口
运维·服务器·小程序
尚学教辅学习资料5 小时前
基于微信小程序的电商平台+LW示例参考
java·微信小程序·小程序·毕业设计·springboot·电商平台
尘浮生5 小时前
Java项目实战II基于微信小程序的移动学习平台的设计与实现(开发文档+数据库+源码)
java·开发语言·数据库·spring boot·学习·微信小程序·小程序
fakaifa8 小时前
CRMEB Pro版v3.1源码全开源+PC端+Uniapp前端+搭建教程
前端·小程序·uni-app·php·源码下载
托马斯-酷涛9 小时前
小程序源码-模版 100多套小程序(附源码)
小程序
小蒜学长11 小时前
springboot基于SpringBoot的企业客户管理系统的设计与实现
java·spring boot·后端·spring·小程序·旅游