小程序使用阿里巴巴矢量图标库

一、登录官网

www.iconfont.cn

二、在搜索框中搜索想要的图标,将鼠标移动到图标上会看到三个标记

  • 可以使用下载,直接使用:

  • 可以使用css文件使用:
    •  首先点击购物车样式的选项,而后点击下图位置:

  • 点击自己创建的项目,如果没有要创建

 

点击项目后进入下一步骤。

三、下载(复制)样式文件

点击下面:

  • 复制网页中的代码,并在小程序中 创建全局样式文件app.wxss或者app.scss
  • 然后再项目中使用text标签,通过class属性指定
<view class="info">
<text><text class="iconfont icon-tongchengpeisong"></text>同城配送</text>
<text><text class="iconfont icon-src_http___pic30photophotocn_20140223_0022006080"></text>行业龙头</text>
<text><text class="iconfont icon-shijian"></text>半小时送达</text>
<text> <text class="iconfont icon-haoping"></text>100%好评</text>
</view>
  • 那么类名怎么指定,来自咱从网站创建的app.wxss(app.scss)文件中的类名,下面展示部分:
.icon-tongchengpeisong:before {
  content: "\e61b";
}

四、注意点

因为阿里巴巴默认没有使用base64编码,所以导致微信小程序报错,为了去掉报错,可以修改项目设置,从新生成新的css代码:

最后点进网址,复制到自己的app.wxss中。

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

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

相关文章

怎么排查K8S容器当中的Java程序内存泄露问题

今天早上发现生产线其中的一个服务在凌晨的时候突然重启了&#xff0c;内存突然从1G升到1.8G&#xff0c;CPU使用量从0.1升到了0.28&#xff0c;说明在这个时间点&#xff0c;内存突增达到了限额以上&#xff0c;服务重启了。因为这个服务布署了多节点&#xff0c;这次重启对业…

实验7:路由冗余协议HSRP配置管理(课内实验以及解答)

实验目的及要求&#xff1a; 理解首跳冗余协议&#xff08;FHRP&#xff09;的工作原理&#xff0c;掌握热备份路由器协议 (HSRP)&#xff08;思科私有协议&#xff09;原理和配置。能够实现网络终端设备虚拟网关的配置和网络故障的灵活切换&#xff0c;完成相应网络的联通性测…

ubuntu samba 安装与配置

ubuntu samba 安装与配置 一&#xff1a;安装二&#xff1a;添加samba访问账号及密码三&#xff1a;修改配置文件四&#xff1a;重启服务五&#xff1a;登录 一&#xff1a;安装 sudo apt update sudo apt install samba samba-common二&#xff1a;添加samba访问账号及密码 …

链表与模拟LinkedList的实现

1. ArrayList的缺陷 ArrayList底层使用数组来存储元素 由于其底层是一段连续空间&#xff0c;当在ArrayList任意位置插入或者删除元素时&#xff0c;就需要将后序元素整体往前或者往后 搬移&#xff0c;时间复杂度为O(n)&#xff0c;效率比较低。因此ArrayList不适合做任意位…

Restful API 具体设计规范(概述)

协议 https 域名 https://www.baidu.com/api 版本 https://www.baidu.com/v1 路径 https://www.baidu.com/v1/blogs 方法 数据过滤 状态码返回结果 返回的数据格式 尽量使用 JSON&#xff0c;避免使用 XML。 总结&#xff1a; 看 url 就知道要什么看 http method 就知道干…

【面试经典 150 | 二叉树】二叉搜索树迭代器

文章目录 写在前面Tag题目来源解题思路方法一&#xff1a;中序遍历到数组方法二&#xff1a;迭代 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于本…

记录wordpress网站搭建及当天被SEO优化收录

网站是前不就前搭建的&#xff0c;但是一直没有做SEO优化&#xff0c;今天花了点时间做下优化。记录下&#xff0c;喜欢的朋友点赞收藏下。 1.wordpress后台下载插件Yoast SEO插件&#xff0c;setting中搜索XML sitemaps&#xff0c;点view the XML sitemap&#xff0c;暂时不…

【Ant-Desgin 头像上传框】限制数量为1张图片,base64,其他需求可以改我组件中的代码

Ant-Desgin 头像上传框 样式图参数主要代码UpLoad 组件父组件 样式图 图片数量限制为1&#xff0c;当选择了图片后&#xff0c;需要切换图像时需点击头像完成切换 参数 /*** description: 图片上传组件* param {*} action: 上传地址* param {*} width: 宽度* param {*} height…

【网络技术】【Kali Linux】Wireshark嗅探(十一)以太网Ethernet协议报文捕获及分析

往期 Kali Linux 上的 Wireshark 嗅探实验见博客&#xff1a; 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;一&#xff09;ping 和 ICMP 【网络技术】【Kali Linux】Wireshark嗅探&#xff08;二&#xff09;TCP 协议 【网络技术】【Kali Linux】Wireshark嗅探&…

Eagle for Mac:强大的图片管理工具

Eagle for Mac是一款专为Mac用户设计的图片管理工具&#xff0c;旨在帮助用户更高效、有序地管理和查找图片资源。 Eagle for Mac v1.9.2中文版下载 Eagle支持多种图片格式&#xff0c;包括JPG、PNG、GIF、SVG、PSD、AI等&#xff0c;无论是矢量图还是位图&#xff0c;都能以清…

SnapGene Mac v5.3.1中文激活版:综合性分子生物学软件

SnapGene Mac是一款功能全面、操作便捷的综合性分子生物学软件&#xff0c;专为Mac用户打造。它集成了DNA序列编辑、分析、可视化和团队协作等多种功能&#xff0c;为科研人员提供了一个高效、可靠的分子生物学研究工具。 SnapGene Mac v5.3.1中文激活版下载 在SnapGene Mac中&…

Spring Boot 3.2.5 集成 MyBatisPlus

前置条件&#xff0c;先连接好数据库&#xff0c;并且数据库里新建表插入几条数据 连接mysql传送门 版本 Spring Boot 3.2.5 第一步&#xff0c;添加依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-start…

短视频矩阵营销系统 poihuoqu 任意文件读取漏洞复现

0x01 产品简介 短视频矩阵营销系统是由北京华益云数据科技有限公司开发的一款产品,这家公司专注于抖音短视频矩阵营销系统的研发,致力于为企业提供全方位的短视频营销解决方案。华益云抖销短视频矩阵系统可以帮助企业快速搭建多个短视频账号,实现内容的批量制作和发布,提高…

vue echarts折线图 折线堆积图和折线面积图

vue echarts折线图 折线堆积图和折线面积图 1、折线堆积图和折线面积图的结合&#xff1b; 上代码 <template><section><divid"performaceLineChart"ref"performaceLineChartRef"style"width: 100%; height: 500px"></d…

CasinoRoyale靶机练习实践报告

CasinoRoyale靶机练习实践报告 下载地址: https://drive.google.com/open?id1FYP246L63zShV00wOckAQ5F5XJ4HkZ0Lhttps://download.vulnhub.com/casinoroyale/CasinoRoyale.ovahttps://download.vulnhub.com/casinoroyale/CasinoRoyale.ova.torrent ( Magnet) 1 安装靶机 …

分布式WEB应用中会话管理的变迁之路

Session一词直译为“会话”&#xff0c;意指有始有终的一系列动作&#xff0f;消息。Session是Web应用蓬勃发展的产物之一&#xff0c;在Web应用中隐含有“面向连接”和“状态保持”两个含义&#xff0c;同时也指代了Web服务器与客户端之间进行状态保持的解决方案。 在Web应用…

018基于SSM的音乐系统网站

018基于SSM的音乐系统/网站 开发环境&#xff1a; Jdk7(8)Tomcat7(8)MysqlIntelliJ IDEA(Eclipse)Maven 数据库&#xff1a; MySQL 技术&#xff1a; SpringSpring mvcMybatisJqueryVideo jsJSPJSTLEasyUI 适用于&#xff1a; 课程设计&#xff0c;毕业设计&#xff0c;学习…

tiktok如何影响用户行为的分析兼论快速数据分析的策略

tiktok如何影响用户行为的分析 快速数据分析的策略流程&#xff1a; 1.确定指标变量&#xff0c;也就确定了数据分析想要回答的问题。想回答不同的问题&#xff0c;就选择不同的指标变量。 变量筛选方法选出指标变量相关的变量&#xff1b; 针对筛选出的变量进行描述性分析和因…

职场口才使人取得事业上的成功?

职场口才使人取得事业上的成功&#xff1f; 一、引言 在职场中&#xff0c;一个人的口才能力往往成为其事业成功的关键因素。优秀的职场口才不仅能够帮助我们更好地与他人沟通交流&#xff0c;还能够展现个人的专业素养和魅力&#xff0c;为事业的顺利发展奠定坚实基础。本文将…

【软件】ERETCAD-Env:在轨空间环境3D动态仿真软件

文章介绍了Extreme-environment Radiation Effect Technology Computer-Aided Design – Environment (ERETCAD-Env)软件&#xff0c;文章的介绍和展示了ERETCAD-Env软件的功能和特点&#xff0c;这是一款用于动态模拟在轨卫星所处空间环境的计算机辅助设计软件。强调了该软件在…