微信小程序引入阿里巴巴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.hqwc.cn/news/139199.html

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

相关文章

Triple协议的隐式参数传递过程

前言 Dubbo 框架的 RPC 调用除了可以传递正常的接口参数外&#xff0c;还支持隐式参数传递。 隐式参数的传递依赖 RpcContext 对象&#xff0c;它持有一个 Map 对象&#xff0c;消费者往 Map 里写入数据&#xff0c;客户端在发起 RPC 调用前会构建 RpcInvocation&#xff0c;然…

华为eNSP配置专题-ACL的配置

文章目录 华为eNSP配置专题-ACL的配置1、前置环境1.1、宿主机1.2、eNSP模拟器 2、基本环境搭建2.1、基本终端构成和连接2.2、各终端基本配置2.2.1、PC1和PC2的配置2.2.2、模拟互联网的路由器的配置2.2.3、财务部服务器的配置2.2.4、路由器AR1的配置 2.3、让各网段能够ping通互联…

IDEA如何设置项目包名分级

按上面的勾选即可&#xff01;

win 10怎么录屏?教你轻松捕捉屏幕活动

在当今科技快速发展的时代&#xff0c;录屏已成为信息分享、教学、游戏直播等方面的重要工具。无论是为了制作教程、分享游戏过程还是保存重要信息&#xff0c;录屏功能都发挥着举足轻重的作用。可是很多人不知道win 10怎么录屏&#xff0c;本文将详细介绍win10的三种常用录屏方…

Java前后端分离项目中跨域问题 讲解

Java前后端分离项目中跨域问题 讲解 前言什么是跨域问题&#xff1f;CORS解决跨域问题使用Servlet过滤器使用Spring Framework的CrossOrigin注解 总结 我是将军我一直都在&#xff0c;。&#xff01; 前言 当在Java前后端分离项目中工作时&#xff0c;跨域问题是一个常见的挑战…

Spring中Setter注入详解

目录 一、setter注入是什么 二、setter注入详解 三、JDK内置类型注入方式 3.1 数组类型 3.2 set集合类型 3.3 list集合 3.4 map集合 3.5 properties类型 四、用户自定义类型 一、setter注入是什么 书接上回&#xff0c;我们发现在Spring配置文件中为类对象的属性赋值时&#x…

WebSocket学习笔记

一篇文章理解WebSocket原理 1.HTTP协议(半双工通信)&#xff1a; HTTP是客户端向服务器发起请求&#xff0c;服务器返回响应给客户端的一种模式。 特点&#xff1a; 1.只能是客户端向服务器发起请求&#xff0c;是单向的。 2.服务器不能主动发送数据给客户端。 半双工通信…

二叉树的最小深度(rust实现)

二叉树的最小深度 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 思路 这道题本质上是考察&#xff1a; 如何遍历二叉树理解什么是深度 对于这两点的考察&am…

欧盟反垄断法的改变:对跨境电商的冲击和机遇

2024年&#xff0c;欧盟反垄断法将经历一场革命性的改变&#xff0c;这对于跨境电商来说是一个重大的法规转折点。长达数十年的联合体集体豁免条例&#xff08;CBER&#xff09;即将失效。 这意味着货运公司将不再享受欧盟针对反竞争协议规则的特殊待遇。这一法规的变革将对跨…

探索低代码技术

低/无代码的高速发展&#xff0c;属于软件市场的选择&#xff0c;相较于传统编写代码的开发方式&#xff0c;低/无代码开发效率高、投入成本低、技术门槛也更低&#xff0c;未来更多软件应用将使用低/无代码技术完成&#xff0c;这也是趋势。 身为开发人员经常需要花大量时间在…

智慧公厕管理系统:科技赋能城市公共卫生服务的便利

在现代社会的城市化进程中&#xff0c;公共设施的管理变得越来越重要。而公厕作为城市公共设施的重要组成部分&#xff0c;也需要借助科技的力量进行管理和监控。智慧公厕管理系统应运而生&#xff0c;它为公厕管理人员提供了实时监控和数据统计分析的功能&#xff0c;大大提高…

Nginx正向代理,反向代理,负载均衡

Nginx正向代理&#xff0c;反向代理&#xff0c;负载均衡 Nginx当中有两种代理方式&#xff1a; 七层代理&#xff08;http协议&#xff09; 四层代理&#xff08;tcp/udp流量转发&#xff09; 七层代理&#xff1a;七层代理&#xff0c;代理的是http的请求和响应 客户端请求…