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

news2024/11/25 2:30:36

介绍

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

使用方式

  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.coloradmin.cn/o/1097811.html

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

相关文章

华为云云耀云服务器L实例评测|从零快速搭建个人博客指南

文章目录 1. 云耀云服务器L实例特点2. 云耀云服务器L实例购买3. 博客系统搭建3.1. 安装 Docker3.2 Halo 搭建 4. 防火墙配置5. 浏览器访问 1. 云耀云服务器L实例特点 智能不卡顿 瑶光AI智能调度与新一代网络技术&#xff0c;软硬实力驱动性能倍增&#xff0c;成就更流畅、稳定的…

数据结构:链表(2),链表面试题

203. 移除链表元素 - 力扣&#xff08;LeetCode&#xff09; 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出…

Web自动化测试-PO模式实战详解

PO模式 Page Object(简称PO)模式&#xff0c;是Selenium实战中最为流行&#xff0c;并且是自动化测试中最为熟悉和推崇的一种设计模式。在设计自动化测试时&#xff0c;把页面元素和元素的操作方法按照页面抽象出来&#xff0c;分离成一定的对象&#xff0c;然后再进行组织。 …

NI GPIB-140A 使用缓冲传输技术 边缘人工智能

NI GPIB-140A 使用缓冲传输技术 边缘人工智能 GPIB总线扩展器—GPI b-140 a可以将GPIB系统的电缆长度延长一千米&#xff0c;而不会影响GPIB的完整性&#xff0c;也不需要修改软件。该配件使用缓冲传输技术&#xff0c;以高达1.1 Mb/s (IEEE 488.1)或2.8 Mb/s (HS488)的速率传…

初识C++入门(1)

为什么会衍生出C&#xff1f; C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c;20世纪80年代&#xff0c;计算机界提出…

安科瑞预付费系统在某大型连锁农贸市场的设计应用

安科瑞 崔丽洁 摘要 本远程预付费管理系统采用智能远程预付费电表&#xff08;DTSY1352-NK/DDSY1352-NK系列&#xff09;&#xff0c;NB智能远传水表&#xff0c;采集各商户实时用电量、用电量总数&#xff0c;通过平台定时结算&#xff0c;结算账户余额&#xff0c;从而进行智…

资深IC工程师的快速学习指南《Verilog语言知识学习快速基础学习》

Verilog语言是一种硬件描述语言&#xff08;HDL&#xff09;&#xff0c;广泛用于数字集成电路&#xff08;IC&#xff09;设计和硬件描述。对于IC行业的初学者来说&#xff0c;掌握Verilog语言是非常重要的&#xff0c;因为它是设计和仿真IC电路的基础。之前也分享过很多Veril…

调用Open3d接口报错:E0282 全局范围没有 “localeconv“及E0070 不允许使用不完整的类型

Open3D已经编译好&#xff0c;在新建一个C工程测试接口的时候出现了以下报错 严重性 代码 说明 项目 文件 行 禁止显示状态 错误(活动) E0070 不允许使用不完整的类型 EnvTest F:\Program Files (x86)\Microsoft Visual Studio\2019\Community\VC\Tools\MSVC\14.29.30133\incl…

如何使PoE交换机连接稳定?

随着PoweroverEthernet&#xff08;PoE&#xff09;技术的不断发展&#xff0c;PoE交换机已经处于非常成熟的阶段。然而&#xff0c;由于目前监控市场受到成本压力的影响&#xff0c;一些采用PoE供电的项目可能会选用品质较低的PoE交换机或线材&#xff0c;或者设计方案本身不合…

MQTT整合

MQTT整合 MQTT服务器软件筛选MQTT服务器软件mosquitto下载修改mosquitto配置,并启动mosquitto服务利用mosquitto工具测试订阅与发布可视化MQTT客户端工具MQTTX使用SpringBoot整合MQTT1.2.3.4.5.6.MQTT服务器软件筛选 MQ遥测传输(MQTT)是轻量级基于代理的发布/订阅的消息传输…

如何正确维护实验室超声波清洗器?

实验室一直被视为一个严谨而严肃的场所&#xff0c;实验应遵循一定的步骤&#xff0c;使用的设备也经历了详细的选择&#xff0c;如实验室超声波清洗机&#xff0c;其特点远强于一般类型的清洗机。专门负责采购的实验室人员一般对优质服务的实验室超声波清洗机印象深刻&#xf…

电力物联网关智能通讯管理机-安科瑞黄安南

众所周知&#xff0c;网关应用于各种行业的终端设备的数据采集与数据分析&#xff0c;然后去实现设备的监测、控制、计算&#xff0c;为系统与设备之间建立通讯联系&#xff0c;达到双向的数据通讯。 网关可以实时监测并及时发现异常数据&#xff0c;同时自身根据用户规则进行…

安科瑞ASCB1智能漏电断路器监测漏电和漏电保护

安科瑞虞佳豪壹捌柒陆壹伍玖玖零玖叁 ASCB1系列一体式智慧空开&#xff0c;空开自带4G、WIFI、以太网等多种通讯方式&#xff0c;可选本地显示&#xff0c;集成保护、控制、计量等多种功能。广泛用于老旧社区改造、九小场所、学校宿舍、公寓、铁塔基站、路灯、充电桩等。

文献阅读快速法-ChatPDF

如题&#xff0c;直接提供给大家一款能够快速阅读文档的好工具——iTextMaster。 iTextMaster是一款免费的pdf阅读浏览器&#xff0c;上传pdf文档后等待几秒钟&#xff0c;AI就会自动反馈给用户关于文档的摘要总结。十分的方便且实用。 ChatPDF为您提供简洁的文档摘要。对于那…

数据库管理-第110期 Oracle Exadata 01(20231016)

数据库管理-第110期 Oracle Exadata 01&#xff08;202301016&#xff09; 今天开始一个新的系列&#xff0c;讲讲Oracle Exadata&#xff0c;将用若干期并关联之前和一体机相关的一些内容对Exadata进行讲解。本期是Oracle硬件的介绍。 1. Oracle Hardware and Engineered Sy…

STM32 看门狗(WDG)

STM32 看门狗&#xff08;WDG&#xff09; WDG简介 WDG&#xff08;Watchdog&#xff09;看门狗 在程序卡死的情况下&#xff0c;自动帮我们复位 简单来说就是程序运行的一个保障措施&#xff0c;我们得在程序中定期地进行喂狗&#xff0c;如果程序出问题卡死了&#xff0c;没…

存在已打开的MicrosoftEdge浏览器,无法执行安装

存在问题&#xff1a;UiBot Creator 安装Chrome扩展时&#xff0c;存在已打开的MicrosoftEdge浏览器&#xff0c;无法执行安装。 解决办法&#xff1a; 打开MicrosoftEdge浏览器&#xff0c;然后在浏览器页面右上角打开“…”图标 第二步&#xff0c;打开“…”图标之后&…

多关键词高亮显示

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

批量修改视频尺寸:简单易用的视频剪辑软件教程

如果你需要批量修改视频尺寸&#xff0c;同时保持高质量的画质&#xff0c;那么“固乔剪辑助手”这款软件是你的不二之选。下面就是如何使用这款软件进行批量修改视频尺寸的详细步骤。 1. 首先&#xff0c;你需要在浏览器中进入“固乔科技”的官网&#xff0c;然后下载并安装“…

美客多、亚马逊卖家如何运用自养账号进行有效测评?

到了10月&#xff0c;卖家朋友们都在忙着准备Q4旺季吧&#xff01; 首先&#xff0c;祝愿所有看到这条推文的卖家朋友&#xff0c;今年旺季都能爆单&#xff0c;赚得盆满钵满&#xff01; 测评是珑哥常谈&#xff0c;一直备受关注&#xff0c;不论是新老卖家都是一个逃不开的…