支付宝小程序使用阿里图标库

最新推荐文章于 2024-08-07 11:50:30 发布
最新推荐文章于 2024-08-07 11:50:30 发布
阅读量1.5k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40888956/article/details/89915984
版权
本文介绍了如何在支付宝小程序中使用阿里图标库的步骤：从下载图标库字体到通过transfonter.org转换为base64编码，再到修改acss文件并导入到小程序的相应目录，最后在页面中使用图标。
摘要由CSDN通过智能技术生成

第一步：先下载阿里图标库字体

 

第二部：https://transfonter.org/进入这个网址把iconfont.ttf文件转成base64 encode格式的编码文件，转后有三个文件只用其中两个

 

第三部：把生成的文件中的stylesheet.css改成acss文件

第四部：在自己要用的支付宝小程序中创建static文件在static文件中创建ali-icon文件，再将第三部生成的字体文件中的iconfont.ttf文件和stylesheet.acss文件放入其中。

第五部：再将第一步下载阿里图标文件中的iconfont.css改成acss。也放在ali-icon文件中，然后在最外层app.acss中引入  @import "/static/ali-ico

最低0.47元/天 解锁文章
张_heng286
关注
使用阿里巴巴图标库生成iconfont字体图标
soos的博客
01-09 1万+
iconfont字体图标就是用字体来代替图标、图片文件的做法，并且通过字体图标可以对图标的大小、颜色等进行控制，但是缺点就是只能实现一种颜色，不能像图片那样含有各种颜色。 通过阿里巴巴图标库制作字体图标步奏如下（默认已注册阿里巴巴图标库）： 1、首先搜索所要展示的图片，找到后点击入库。 2、点击入库的图标，结果如下图所示，选择添加至项目或点新建项目。 3、点击确定之后如下图所示，鼠
支付宝小程序使用阿里图标
狂奔的蜗牛
08-28 4391
方法一：使用本地文件 1 下载阿里图标到本地 http://iconfont.cn/    2.转换iconfont.ttf文件（小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64。用网址https://transfonter.org/转换) Base64 encode 不选中也没关系 3...
小程序中使用阿里巴巴矢量图
weixin_57792333的博客
08-30 174
图标寻找完毕后 使用 Font class 方法 点击css 代码进入 新的页面 复制后，粘贴到 小程序的wxss文件 中 pages 页面可以 通过 引入 该 wxss文件 来使用 @import '/styles/icon.wxss' 引入后 通过 写对应的 class 名 来使用 使用 ’ 送货车 ‘ 图标 // 将图标 对应的 class 写进去 <view class="iconfont icon-songhuoche"></view> 效
阿里图标库symbol使用手册【小程序】
最新发布
u013236718的博客
08-07 391
1、小程序开启使用npm模块；2、小程序项目根目录不要有iconfont目录，否则会清空里面所有内容；3、有nodejs环境；在小程序项目根目录，使用npm安装mini-program-iconfont-cli插件；
支付宝小程序使用 icontfont字体图标
Zhooson的博客
05-07 4467
下载的文件中 有个 iconfont.css 这个文件，打开文件 复制代码到自己新建一个test.acss的文件，然后在app.acss的中引入 打开 https://transfonter.org/ 这个网站 转化为base64的格式 选择上传 刚刚下载在本地的中iconfont.ttf的文件 下载下来后有 demo.html iconfont.woff ...
支付宝小程序中使用阿里字体图标
一捆铁树枝的博客
12-29 2043
阿里字体图标官网：http://iconfont.cn/  1.首先在阿里字体图标官网将需要使用的图标加入购物车，并按下图中的操作下载到本地 2.在支付宝小程序的根目录新建static/ali-icon 3.将下载下来的字体压缩文件解压，解压后的文件内容如下 4.将文件夹中的iconfont.css名称改成stylesheet.acss; 5.将iconfont.ttf和改完...
阿里icon图标库使用说明
热门推荐
sanlingwu的博客
10-16 1万+
之前只会在图标库里把图片下载下来再逐个引用，实在是蠢的不行，mark一下自己的一整个项目的icon库如何创建。 1、进入阿里巴巴图标库网站http://www.iconfont.cn/ 2、搜索想要的图标 3、选一个需要的图标加入购物车 4、右上角找到购物车的图标将图标，点击添加至项目，放到项目中，之前没有项目要新创建一个 5、然后我们会跳到我们图标所在的项目中，注意红色框框...
商城支付宝小程序
01-19
【支付宝小程序】是一种轻量级的应用开发框架，由阿里巴巴旗下的蚂蚁金服推出，旨在帮助开发者快速构建在支付宝平台上运行的小程序。与传统的APP相比，小程序无需下载安装即可使用，节省了用户的手机存储空间，同时...
小程序源码（无后台）_机器人兔兔.rar
06-12
小程序是一种轻量级的应用形式，由微信、支付宝等平台提供支持，用户无需下载安装即可使用。它们通常用于提供快速、便捷的服务，如购物、预订、查询等。在本案例中，“机器人兔兔”可能是一个娱乐或教育性质的小程序...
商城小程序
08-09
在实际开发过程中，开发者会使用前端框架（如Vue、React或uni-app）、后端语言（如Node.js、Python或PHP）及云服务（如腾讯云、阿里云）等技术，构建出功能完善、性能良好的商城小程序。同时，为了保证数据安全和...
测量小程序合集.rar
09-15
支付宝小程序则使用阿里云开发平台，依赖于Alipay Mini Program Studio，使用JSBridge与后端服务交互。 测量小程序的设计通常涉及到以下技术点： 1. 用户界面设计：UI设计需要简洁直观，让用户能够快速理解如何进行...
小程序使用阿里巴巴TTF字体文件以及图标
weixin_30924239的博客
06-27 373
转话地址https://transfonter.org 第一步：下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为： 搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。 点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内...
支付宝小程序-----图表
lannieZ的博客
03-30 1769
小程序方未提供相关插件，可以利用蚂蚁的F2插件 https://f2.antv.vision/zh/examples/line/basic
iconfont图标_小程序引用Iconfont 图标
weixin_39718890的博客
12-01 172
选择图标下载代码1.添加项目2.选择 Unicode3.下载代码4.解压文件5.拷贝iconfont.css到小程序目录注意:我这里用的是支付宝小程序做演示 所有吧css后缀改成了 acss 如果是微信小程序的话 改成对应的.wxss 就好了引用图标可以单页面引用 也可以全局引用 如果是全局引用的话 则在app.acss/app.wxss中 引用即可 下面演示单页面引用方法1.修改iconfont...
Vue 使用阿里图标库代替element icon
m0_56966142的博客
03-15 1692
一、创建阿里图标库项目 打开网址：https://www.iconfont.cn/ ，找到【我的项目】 点击右侧文件夹【创建项目】 填写【项目名称】，【FontClass】前缀填好后，后续使用icon图标时会使用该前缀，类似于element icon 写法 二、图标加入项目 找到你想要的图标，点击加入购物车 点击网页顶部的购物车图标，把购物车中的所有图标加入到项目中 三、下载图标文件，并添加到Vue项目 点击【生成代码】，然后【下载文件】 文件下载后的目录结构，并删掉多余的文件
[react] React项目中使用阿里font-icon的svg形式
tuzi007a的博客
09-05 950
[react] React项目中使用阿里font-icon的svg形式
Vue Element使用第三方icon图标
smile radiantly
11-18 5647
一：引入单设图标 1.打开 阿里icon，注册 >登录>图标管理>我的项目 2.新建项目 返回阿里icon首页，点进去你想要的icon库，因为没有批量导入购物车，所以一般情况下需要一个一个去点，太浪费时间，那么请在控制台输入以下代码，批量导入 var icons = document.querySelectorAll('.icon-gouwuche1'); var auto...
微信小程序中使用阿里字体图标（无需下载字体文件到本地）
qq_43241161的博客
03-17 689
在微信小程序中使用iconfont字体图标（无须下载字体文件到本地） 使用过iconfont图标的老铁们可以直接看第6步 进入阿里字体图标官网，在搜索栏中搜索自己需要的图标 2.加入到购物车后，点击购物车 3.点击添加至项目 4.点击添加项目出现如下图所示，如果没有项目可以新建项目，有项目就直接选择 5.点击上图的确定按钮后，会跳转到如下图所示页面，点击复制代码 6.重点来了，将复制的...
支付宝小程序开发指南：实战与策略
"《阿里巴巴-小程序开发.pdf》是一份详尽的指南，涵盖了支付宝小程序的开发与应用，适合对这一领域感兴趣的开发者和企业。本书首先介绍了支付宝小程序的重要性和优势，强调其轻量化的特性使得用户可以随时随地使用，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值