当前位置： 首页 > article >正文

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

article 2024/11/16 4:17:13

前言

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

1.下载图标

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

解压如下
image.png

2.转换格式

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

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

image.png

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

3.在微信小程序中配置

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

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

  3. 全选，复制所有内容
    image.png

  4. 粘贴到iconfont.wxss文件
    image.png

  5. 替换代码
    打开刚才转换完成的css文件
    image.png
    全部复制
    image.png
    替换
    image.png

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

4.在文件中引用

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

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


http://www.kler.cn/a/395334.html

相关文章：

  • java 随机生成验证码
  • 微信小程序自定义顶部导航栏（适配各种机型）
  • 二分查找--快速地将搜索空间减半
  • HarmonyOS NEXT应用开发实战 ( 应用的签名、打包上架，各种证书详解)
  • 有了Makefile, CMake存在的意义是什么?如何借助Makefile构建ObjC语言编译环境?如何获取编译器的版本号?
  • 【JavaScript】为 setInterval（）定义变量，存储ID
  • Dubbo分布式日志跟踪实现
  • Win10 安装MySQL 5.7.32(解压版)
  • Flink1.19编译并Standalone模式本地运行
  • 在C2M（Customer-to-Manufacturer）柔性制造模式下，算法
  • element-ui】使用el_upload上传文件无法动态修改action
  • Scala的set
  • Python学习------第八天
  • 万字长文解读深度学习——训练（DeepSpeed、Accelerate）、优化（蒸馏、剪枝、量化）、部署细节
  • 界面控件Kendo UI for Angular中文教程：如何构建带图表的仪表板？（一）
  • 跨域问题的产生和解决
  • 【MatLab手记】 --从0到了解超超超详过程！！！
  • JWT深度解析：Java Web中的安全传输与身份验证
  • 雷光联动自动化标校方法
  • Python自动化小技巧24——实现自动化输出模板表格报告
  • react 受控组件和非受控组件
  • 使用git命令实现对gitee仓库的下载、更新、上传、上传更新操作。
  • FluentUI使用
  • kafka 生产经验——数据积压（消费者如何提高吞吐量）
  • 图像处理技术椒盐噪声
  • [C++刷题] 基础小知识点(5) 数字反转\求数字位数