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

前言

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/912829.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

大数据之多级缓存方案

大数据之多级缓存方案

多级缓存介绍&#xff1f;多级缓存优缺点&#xff0c;应用场景&#xff1f;多级缓存架构&#xff1f; 多级缓存介绍 多级缓存方案是一种优化手段&#xff0c;通过在多个级别上存储数据来提高应用程序的性能和响应速度。以下是对多级缓存方案的详细解析&#xff1a; 一、多级缓…
阅读更多...
jupyter notebook启动和单元格cell

jupyter notebook启动和单元格cell

【注意&#xff01;&#xff01;&#xff01;】 本章主要讲解数据分析、挖掘入门及进阶知识 - 通过多篇文章【文字案例】的形式系统化进行描述 数据分析专栏&#xff1a;https://blog.csdn.net/2201_75422674/category_12827743.html - 大家喜欢可以订阅一下&#xff0c;不收费…
阅读更多...
街道网格领域的数据大屏，在社区治理方面大显身手。

街道网格领域的数据大屏，在社区治理方面大显身手。

街道网格领域的数据大屏在社区治理中发挥着重要作用。它可以直观地展示社区的人口分布、治安状况、环境问题等各类信息。 通过实时更新的数据&#xff0c;社区工作人员能够及时掌握动态变化&#xff0c;迅速做出决策。色彩鲜明的图表和图形让复杂的数据一目了然&#xff0c;方…
阅读更多...
14、NAT和桥接区别

14、NAT和桥接区别

一、NAT模式 NAT相当于是局域网中的局域网&#xff0c;把192.168.21.1当作外网ip&#xff0c;重新划分了一个网关&#xff08;192.168.33.x&#xff09; 二、桥接模式 网桥只是把网络桥接起来&#xff0c;还是原来的网关&#xff08;192.168.21.x&#xff09;&#xff0c;虚拟机…
阅读更多...
k8s 处理namespace删除一直处于Terminating —— 筑梦之路

k8s 处理namespace删除一直处于Terminating —— 筑梦之路

问题现象 k8s集群要清理某个名空间&#xff0c;把该名空间下的资源全部删除后&#xff0c;删除名空间&#xff0c;一直处于Terminating状态&#xff0c;无法完全清理掉。 如何处理 为什么要记录下这个处理的步骤&#xff0c;经过查询资料&#xff0c;网上也有各种各样的方法&…
阅读更多...
鸿蒙多线程开发——Worker多线程

鸿蒙多线程开发——Worker多线程

1、概 述 1.1、基本介绍 Worker主要作用是为应用程序提供一个多线程的运行环境&#xff0c;可满足应用程序在执行过程中与主线程分离&#xff0c;在后台线程中运行一个脚本进行耗时操作&#xff0c;极大避免类似于计算密集型或高延迟的任务阻塞主线程的运行。 创建Worker的线…
阅读更多...
Python实现SSA智能麻雀搜索算法优化BP神经网络回归模型(优化权重和阈值)项目实战

Python实现SSA智能麻雀搜索算法优化BP神经网络回归模型(优化权重和阈值)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 随着人工智能技术的发展&#xff0c;机器学习算法在各个领域的应用越来越广泛。其中&#xff0c;神…
阅读更多...
qt QListView详解

qt QListView详解

1、概述 QListView 是 Qt 框架中的一个视图类&#xff0c;用于展示模型中的数据。它基于 QAbstractItemView&#xff0c;支持多种视图模式&#xff0c;如列表视图&#xff08;List View&#xff09;、图标视图&#xff08;Icon View&#xff09;等。QListView 是模型/视图框架…
阅读更多...
【MySQL】数据库整合攻略 ：表操作技巧与详解

【MySQL】数据库整合攻略 ：表操作技巧与详解

前言&#xff1a;本节内容讲述表的操作&#xff0c; 对表结构的操作。 是对表结构中的字段的增删查改以及表本身的创建以及删除。 ps&#xff1a;本节内容本节内容适合安装了MySQL的友友们进行观看&#xff0c; 实操更有利于记住哦。 目录 创建表 查看表结构 修改表结构 …
阅读更多...
图片搜索引擎，来快速实现一个高性能的本地图片搜索引擎

图片搜索引擎，来快速实现一个高性能的本地图片搜索引擎

文章来自&#xff1a;苏洋博客 以及基于 Redis 来快速实现一个高性能的本地图片搜索引擎&#xff0c;在本地环境中&#xff0c;使用最慢的稠密向量检索方式来在一张万图片中查找你想要的图片&#xff0c;总花费时间都不到十分之一秒。 写在前面 Redis, 你这浓眉大眼的家伙也正…
阅读更多...
DevOps-课堂笔记

DevOps-课堂笔记

各种 aaS 类比于计算机网络的 OSI 参考模型&#xff0c;一个软件应用项目需要不同的支撑层&#xff0c;例如从下至上大概需要&#xff1a; 硬件层面的服务器针对硬件做弹性分配的虚拟化机制&#xff0c;例如虚拟机在虚拟化环境内运行的 OS支撑软件应用的中间件&#xff0c;例…
阅读更多...
边缘计算的学习

边缘计算的学习

文章目录 概要何为边缘计算&#xff1f;现阶段&#xff0c;企业使用边缘计算相对云计算 整体架构流程边缘网络组件边缘计算与云安全 研究方向结合引用 概要 edge 何为边缘计算&#xff1f; 边缘计算&#xff08;英语&#xff1a;Edge computing&#xff09;&#xff0c;是一种…
阅读更多...
Spring Boot实现文件上传与OSS集成：从基础到应用

Spring Boot实现文件上传与OSS集成：从基础到应用

目录 前言1. 文件上传的基础实现1.1 前端文件上传请求1.2 后端文件接收与保存 2. 集成第三方OSS服务2.1 准备工作2.2 编写OSS集成代码2.3 修改Controller实现文件上传至OSS 3. 文件上传的扩展&#xff1a;多文件上传与权限控制结语 前言 随着互联网应用的快速发展&#xff0c;…
阅读更多...
万字长文解读深度学习——卷积神经网络CNN

万字长文解读深度学习——卷积神经网络CNN

推荐阅读&#xff1a; 卷积神经网络&#xff08;CNN&#xff09;详细介绍及其原理详解 CNN笔记&#xff1a;通俗理解卷积神经网络 文章目录 &#x1f33a;深度学习面试八股汇总&#x1f33a;主要组件输入层卷积层 (Convolutional Layer)批归一化层&#xff08;Batch Normalizat…
阅读更多...
07 Oracle数据库恢复基础解析：从检查点到归档，一步步构建数据安全防线

07 Oracle数据库恢复基础解析：从检查点到归档，一步步构建数据安全防线

文章目录 Oracle数据库恢复基础解析&#xff1a;从检查点到归档&#xff0c;一步步构建数据安全防线一、检查点&#xff08;Checkpoint&#xff09;1.1 检查点定义1.2 检查点重要性1.3 检查点工作原理1.4 手动触发检查点 二、日志&#xff08;Redo Log&#xff09;2.1 日志定义…
阅读更多...
css | padding vs margin

css | padding vs margin

前置知识 height是作用域内容(content)区域的 padding和margin用百分比的时候是怎么算的&#xff1f;父元素的宽度。注意&#xff0c;不是根据父元素相应的属性&#xff0c;就是父亲的width 自身的height是0 以下代码&#xff0c;外面盒子是100x10的&#xff0c;里面的widt…
阅读更多...
Linux平台C99与C++11获取系统时间

Linux平台C99与C++11获取系统时间

源码: #include <iostream> #include <chrono> #include <ctime> #include <thread>using namespace std; int main() {cout << "===使用C99方式获取系统时间===" << endl;time_t now = time(nullptr);struct tm *tm_c99 = lo…
阅读更多...
pwn学习笔记（11）--off_by_one

pwn学习笔记（11）--off_by_one

pwn学习笔记&#xff08;11&#xff09;–off_by_one ​ 在处理for循环或者while循环的时候&#xff0c;有的可能会遇到如下情况&#xff1a; #include<stdio.h>int main(){char buf[0x10];for (int i 0 ; i < 0x10 ; i ){buf[i] getchar();}puts(buf);}​ 多次输…
阅读更多...
基于Java Web的传智播客crm企业管理系统的设计与实现

基于Java Web的传智播客crm企业管理系统的设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…
阅读更多...
【Vue】Vue3.0（十七）Vue 3.0中Pinia的深度使用指南（基于setup语法糖）

【Vue】Vue3.0（十七）Vue 3.0中Pinia的深度使用指南（基于setup语法糖）

上篇文章&#xff1a; 【Vue】Vue3.0&#xff08;十一&#xff09;Vue 3.0 中 computed 计算属性概念、使用及示例 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月10日15点23分 文章…
阅读更多...
最新文章

Copyright @ 2022~2023