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

前言

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

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不能少

相关推荐
wqq_9922502774 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域20 小时前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN20 小时前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji20 小时前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
paterWang20 小时前
小程序-基于java+SpringBoot+Vue的小区服务管理系统设计与实现
java·spring boot·小程序
尘浮生21 小时前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入1 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
tundra381 天前
DTH11传感器温度湿度+esp8266+阿里云+小程序
阿里云·小程序·云计算
虞书欣的61 天前
Python小游戏28——水果忍者
开发语言·人工智能·游戏·小程序·pycharm
坠入暮云间x1 天前
Nodejs开发仿马蜂窝旅游小程序API接口,服务器端开发,商家后台 Vue3+微信小程序+koa+mongodb+node.js
微信小程序·小程序·旅游