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

前言

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

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

相关推荐
说私域2 小时前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者815 小时前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld16 小时前
代驾小程序系统开发:引领出行行业数字化转型
小程序
Python大数据分析18 小时前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
yzx99101319 小时前
JS与Go:编程语言双星的碰撞与共生
java·数据结构·游戏·小程序·ffmpeg
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量池用户运营研究
人工智能·小程序·开源
一只一只妖1 天前
uniapp小程序上传图片并压缩
小程序·uni-app
zkmall1 天前
小程序卡顿到丝滑体验:ZKmall开源商城性能优化与兼容修复实战指南
性能优化·小程序
CodeUp.1 天前
校园二手交易小程序的设计与实现
小程序
菜鸟起航ing1 天前
SaaS型小程序自动化发布解决方案
运维·小程序·自动化