微信小程序引入阿里巴巴iconfont图标并使用

介绍

在小程序里,使用阿里巴巴的图标,如下所示:
在这里插入图片描述

使用方式

  1. 搜索自己需要的图标,然后将需要用到的图标加入购物车,如下图所示:
    在这里插入图片描述
  2. 去右上角,点击购物车按钮;这里第一次使用,会有三个提示,选择 添加至项目 即可。 然后选择新增按钮,新建项目名字。如下所示:
    在这里插入图片描述
  3. 跳转到项目页面,选择 下载至本地,如下所示:
    在这里插入图片描述
  4. 将下载后的压缩包,解压缩,然后将名为iconfont.css 的文件改名为 iconfont.wxss,再在小程序的项目里新增名为style 的文件夹,并在文件夹下,新增名为 iconfont 的文件夹,并将压缩包里的所有文件复制到该文件夹下。如下所示:
    在这里插入图片描述
  5. 点击阿里巴巴项目里的 unicode选项,点击下面的生成代码,然后复制代码,将该代码复制到项目里, iconfont.wxss配置中,进行替换,如下所示
    在这里插入图片描述
    在这里插入图片描述
  6. app.wxss 中,导入刚刚的文件,如下所示
    在这里插入图片描述
  7. 然后就可以在页面进行使用,使用方式如下所示,加上对应的icon名称即可
<text class="iconfont icon-xihuan"></text>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis缓存穿透、缓存击穿、缓存雪崩详解

目录 缓存处理流程 一、缓存穿透 1、概念 2、解决办法 二、缓存击穿 1、概念 2、解决办法 三、缓存雪崩 1、概念 2、解决办法 缓存处理流程 接收到查询数据请求时&#xff0c;优先从缓存中查询&#xff0c;若缓存中有数据&#xff0c;则直接返回&#xff0c;若缓存中查不到则从…

Steam余额红锁的原因,及红锁后申诉办法

安全的余额一般是通过充值卡充值获得&#xff0c;再加上交易手续费再转卖给你。一般便宜不到哪去。 但你别以为余额是安全的&#xff0c;就万事大吉了。照样有被红锁的可能性&#xff0c;比如这三种&#xff1a; 1、Steam市场巡查机制&#xff0c;红锁 平台的巡查机制和原理…

在逍遥模拟器上安装LPSosed模块以及其Manager管理器

环境&#xff1a;win7 64位&#xff0c;python3.8.10&#xff0c;逍遥模拟器9.0.6&#xff0c;安卓版本9 参考我的文章&#xff1a; 在雷电模拟器9上安装magisk并安装LSPosed模块以及其Manager管理器&#xff08;一&#xff09;-CSDN博客 前置工作&#xff1a;先开启模拟器的…

一文讲解图像梯度

简介&#xff1a; ​ 图像梯度计算的是图像变化的幅度。对于图像的边缘部分&#xff0c;其灰度值变化较大&#xff0c;梯度值变化也较大&#xff1b;相反&#xff0c;对于图像中比较平滑的部分&#xff0c;其灰度值变化较小&#xff0c;相应的梯度值变化也较小。一般情…

测试培训机构「某峰」测评调查报告

测试培训机构「某峰」测评调查报告 ⭐文章简介一、机构测评之受访者介绍二、老师傅-机构测评10问&#xff01;第1问 你从哪里了解到这个培训机构&#xff1f;第2问 你为什么选择这家培训机构&#xff0c;它吸引你掏毛爷爷的点有哪些&#xff1f;第3问 回顾一下&#xff0c;从咨…

CA与区块链之数字签名详解

CA与区块链验证本质上都是数字签名&#xff0c;首先&#xff0c;我们看一下什么是数字签名&#xff01; 数字签名 数字签名是公钥密码学中的一种技术&#xff0c;用于验证信息的完整性和发送者的身份。简而言之&#xff0c;数字签名是一种确认信息来源和信息完整性的手段。它通…

企业如何选择安全又稳定的文件传输协议

企业无论是内部的数据共享&#xff0c;还是与外部的合作交流&#xff0c;都需要通过网络进行文件的传输和交换。然而&#xff0c;文件传输它涉及到多方面的因素&#xff0c;例如文件的大小、数量、类型、敏感性、传输距离、网络环境等。这些因素都会影响到文件传输的各个方面&a…

“5G+北斗”赋能千行百业,中海达亮相2023中国移动全球合作伙伴大会

10月12日&#xff0c;2023中国移动全球合作伙伴大会在广州保利世贸博览馆召开。本次活动以“算启新程 智享未来”为主题&#xff0c;重点展示中国移动全球合作伙伴在5G、终端、数智城市等方面的新产品、新技术和新服务。作为中国移动“朋友圈”战略合作企业及“北斗时空子链”链…

快速自动化处理JavaScript渲染页面

在进行网络数据抓取时&#xff0c;许多网站使用了JavaScript来动态加载内容&#xff0c;这给传统的网络爬虫带来了一定的挑战。本文将介绍如何使用Selenium和ChromeDriver来实现自动化处理JavaScript渲染页面&#xff0c;并实现有效的数据抓取。 1、Selenium和ChromeDriver简介…

OpenWrt如何公网ssh远程连接【内网穿透】

文章目录 1.安装cpolar内网穿透2.配置SSH远程访问隧道3.公网远程连接4.固定远程连接地址 简单几步实现openWRT结合cpolar内网穿透工具实现远程ssh连接 1.安装cpolar内网穿透 cpolar是一个非常棒的跨平台、内网穿透工具&#xff0c;可以通过安全隧道将NAT或防火墙后面的本地服…

【Springboot】Filter 过滤器的使用

一、基本介绍 过滤器 Filter 作为 Java 三大器之一&#xff0c;在 Java Web 的使用中有很高的地位。所谓过滤器&#xff0c;就是实现了 javax.servlet.Filter 接口的服务器端程序&#xff0c;就是对事物进行过滤的。在 Web 中的过滤器&#xff0c;当然就是对请求进行过滤&#…

解决axios不发起请求的问题

一个很简单axios发起的get请求&#xff0c;但是network就是没有xhr记录&#xff1a; 找了半天也没有找到原因&#xff0c;后来问了chatgpt才找到原因&#xff1a; 请求地址url前面没有const关键字&#xff0c;此时url相当于undefined&#xff0c;而axios在url为undefined时不会…

天猫商品品牌数据采集接口,天猫商品详情数据接口,天猫API接口

天猫商品品牌数据采集方法如下&#xff1a; 打开天猫&#xff0c;进入任意一个品牌的商品页面。点击浏览器右上角的“选项”按钮&#xff0c;选择“检查元素”或使用快捷键CtrlShiftI&#xff08;Windows&#xff09;或CmdOptionI&#xff08;Mac&#xff09;打开开发者工具。…

JVM类装载器详解

目录 一、类装载的过程 1.1 装载(Load) 1.2 链接(Link) 1.2.1 验证(Varify) 二、类装载器组成 1. JVM 中内置了三个重要的 ClassLoader&#xff0c;同时按如下顺序进行加载&#xff1a; 2、图解 3、加载原则 所谓的双亲委派 类加载器负责在运行时将Java类动态加载到Java虚拟机&…

多关键词高亮显示

引入关键词文件&#xff0c;符合有条件的背景色高亮显示&#xff0c;也可取消。 <div id"testHtml"><p>写入的文本</p><p>关键词</p></div> var str 多个关键词&#xff0c;关键词文件&#xff0c;关键词 var strL str.replac…

nginx报错

故障1&#xff1a;nginx 502错误 故障描述 一个 post 的请求&#xff0c;直接调接口服务数据正常返回&#xff0c;但是通过 nginx 代理后&#xff0c; 什么都没有返回 nginx错误日志 upstream sent invalid chunked response while reading upstream 原因 http协议版本不一致…

【C++】C++11—— 包装器

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C学习 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 上一篇博客&#xff1a;【C】C11…

2023年中国TFT-LCD面板产业链、需求量及市场规模分析[图]

按显示技术尺寸来分&#xff0c;主要分为大尺寸和小尺寸&#xff08;10寸以下&#xff09;&#xff0c;TFT-LCD行业下游主要是各类型消费电子&#xff0c;包括PC显示器&#xff0c;液晶电视&#xff0c;智能手机等。 TFT&#xff0d;LCD面板产业链 资料来源&#xff1a;共研产…

【广州华锐互动】利用VR开展细胞基础实验教学有什么好处?

在科技发展的驱动下&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已被广泛应用于各个领域&#xff0c;包括教育和医学。尤其是在医学教育中&#xff0c;VR技术已成为一种革新传统教学模式的有效工具。本文将探讨使用VR进行细胞基础实验教学的优势。 首先&#xff0c;VR技…

(SCADA)监控与数据采集系统

SCADA应用于监控和采集数据来控制工业过程软件。它通过收集和传输实时数据&#xff0c;帮助操作员监视和控制各种设备和过程。这篇文章将介绍SCADA系统的工作原理、应用行业和场景&#xff0c;以及所需的模块和硬件设备。最后&#xff0c;还会详细介绍几款国外SCADA软件给大家参…