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

一、登录官网

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中。

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

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

相关文章

成都农商银行2024春季校园招聘考试流程及及校招笔试需要重点考察什么?

成都农商银行校招笔试开摄像头吗&#xff1f; 提前模拟&#xff0c;检查好摄像头 成都农商银行校招笔试真题及题型&#xff1f; 成都农商银行校招使用的是智鼎测评题库&#xff0c;前尘无忧考试系统 34、目前&#xff0c;水和肥料都没有在农业中得到最佳使用&#xff0c;传统的…

【pycharm】调试模式中四个常用按钮介绍

【pycharm】调试模式中四个常用按钮介绍 在 PyCharm 的调试模式中&#xff0c;有四个常用的按钮&#xff0c;它们的功能如下&#xff1a; Step Over (F8)&#xff1a;单步执行&#xff0c;但在遇到函数调用时&#xff0c;不会进入函数内部&#xff0c;而是将整个函数作为一步执…

【每日算法】理论:深度学习基础 刷题:KMP算法思想

上期文章 【每日算法】理论&#xff1a;常见网络架构 刷题&#xff1a;力扣字符串回顾 文章目录 上期文章一、上期问题二、本期理论问题1、注意力机制2、BatchNorm 和 LayerNorm 的区别3、Bert 的参数量是怎么决定的。4、为什么现在的大语言模型都采用Decoder only架构&#x…

掌握TypeScript,成为前端高手(AI写作一键生成免费)

首先&#xff0c;这篇文章是基于笔尖AI写作进行文章创作的&#xff0c;喜欢的宝子&#xff0c;也可以去体验下&#xff0c;解放双手&#xff0c;上班直接摸鱼~ 按照惯例&#xff0c;先介绍下这款笔尖AI写作&#xff0c;宝子也可以直接下滑跳过看正文~ 笔尖Ai写作&#xff1a;…

playwright 使用

pip install playwright 是一个命令&#xff0c;用于通过 Python 的包管理工具 pip 安装 Playwright 库。Playwright 是一个用于端到端网页测试的库&#xff0c;支持多种浏览器&#xff0c;包括 Chromium、Firefox 和 WebKit。 执行 pip install playwright 命令后&#xff0c…

【数据结构】stack queue —— 栈和队列

前言 这阵子一直在学数据结构&#xff0c;知识点消化地有点慢导致博客一直没写&#xff0c;现在总算是有时间歇下来补补前面落下的博客了。从现在起恢复周更&#xff0c;努努力一周两篇也不是梦……闲话少说&#xff0c;今天就让我们一起来认识栈和队列 1. 栈的介绍和使用 栈…

网络安全实训Day15

写在前面 电子垃圾&#xff0c;堂堂恢复连载。本来不想分天数梳理了&#xff0c;但是最后要写实训报告&#xff0c;报告里还要有实训日记记录每日学的东西&#xff0c;干脆发这里留个档&#xff0c;到时候写报告提供一个思路。 网络空间安全实训-渗透测试 渗透测试概述 定义 一…

粘合/胶合/粘接/聚酰亚胺PI材料使用UV胶,具有高强度粘接的优势,这一点具体要如何操作?(三十五)

前面文章说明使用UV胶粘合聚酰亚胺PI材料时&#xff0c;有一点优势是&#xff1a;具有高强度粘接&#xff0c;UV胶粘剂对聚酰亚胺PI材料具有良好的附着性&#xff0c;能够提供高强度的粘接。这对于需要承受重负载或高应力的应用来说尤为重要。 这一点提到UV胶在粘合聚酰亚胺&am…

MVP+敏捷开发

MVP敏捷开发 1. 什么是敏捷开发&#xff1f; 敏捷开发是一种软件开发方法论&#xff0c;旨在通过迭代、自组织的团队和持续反馈&#xff0c;快速响应需求变化并交付高质量的软件。相较于传统的瀑布模型&#xff0c;敏捷开发强调灵活性、适应性和与客户的紧密合作。敏捷开发方…

关于权限的设计

首先系统权限&#xff0c;每个账号登录后&#xff0c;都需要知道这个账号允许访问哪些api&#xff0c;哪些数据权限&#xff08;一般是指其他账号的一些数据&#xff09; 这里就需要通过角色来关联。 --1.角色绑定菜单&#xff0c;每个菜单设计的时候包含了这个菜单会用到的所…

Docker共享Nginx配置文件

先去一个容器中&#xff0c;找到Nginx.conf配置文件的目录 去创建一个容器&#xff0c;将容器中存放nginx.conf的目录挂载到宿主机存放nginx.conf目录上 去宿主机中找到nginx/html/index.html目录位置 进入宿主机的index.html中修改页面内容 curl 192.168.91.106访问一下 进入…

网盘——进入文件夹

本文主要讲解网盘的文件操作中进入文件夹的部分&#xff0c;具体实现步骤如下&#xff1a; 1、具体步骤如下&#xff1a; A、客户端发送进入文件夹的请求&#xff08;该请求包含目录信息以及要进入的文件夹名字&#xff09; B、服务器收到该请求之后&#xff0c;服务器首先判…