微信小程序如何使用阿里巴巴矢量图标

最新推荐文章于 2024-05-31 23:05:44 发布
最新推荐文章于 2024-05-31 23:05:44 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 小程序 文章标签： 小程序 图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43932098/article/details/92411886
版权

亲测有效！！！

1.打开阿里巴巴iconfont官网 http://www.iconfont.cn/;
2.把用到的字体图标加到项目里面或者加入购物车，可使用giyhub登录，也可忽略这步;
3.将复制的代码打开一个新的网页，复制网页中全部的内容在这里插入图片描述
4.在你的小程序中新建一个CSS文件，我习惯新建一个文件夹
将3步骤的全部内容复制到这个wxss文件
在这里插入图片描述
4.使用 在wxml文件中，复制icon 图标的class代码
在这里插入图片描述
在这里插入图片描述

ok,完成

前端小可爱∑(´△｀)
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序引用阿里巴巴矢量图标.zip
09-04
通过以上步骤，就可以在微信小程序中成功引用并使用阿里巴巴矢量图标库了。这种方法不仅可以实现图标颜色、大小的自定义，还可以轻松地进行动态图标切换，为微信小程序带来更丰富的视觉体验。需要注意的是，在实际...
微信小程序中使用自定义图标（阿里icon）的方法
12-03
当内置的WeUI图标库无法满足需求时，我们可以利用阿里巴巴矢量图标库（http://iconfont.cn/）来生成并引入自定义的字体图标。以下是具体的操作步骤： 1. **创建自定义图标库**： - 访问阿里巴巴矢量图标库网站，...
微信小程序引用阿里巴巴矢量图标iconfont
ddr66288的博客
04-11 171
最近在写微信小程序，但是引用图片，导致项目文件太大，所以就想到引用阿里巴巴矢量图标的方法 第一步：下载阿里巴巴矢量图代码； 第二步：将下载下来的文件中iconfont.ttf转换即可。转换地址：https://transfonter.org/ 转换之后会生成三个文件： 第三步：将stylesheet.css中的全部代码（@font-face）以及之前下载iconfont文...
微信小程序中使用阿里巴巴字体图标
文龙刚的博客
07-12 385
微信小程序中使用阿里巴巴字体图标
微信小程序-组件和样式（4）字体图标之阿里巴巴矢量图标库的使用
最新发布
weixin_42284031的博客
05-31 692
阿里巴巴矢量图表库的网址：阿里巴巴矢量图标库 在搜索框输入我们需要的图标文本，比如首页/配送/时间等，就会搜索到各种文本图标： 选中文本图标，点击购物车，选择项目： 可以编辑首页项目，比如icon class的名称： 点击生成在线链接，点击.css链接查看生成的CSS代码 二.在微信小程序中使用阿里巴巴矢量图标库 2.1 创建矢量图标库文件夹和文件 注意：在引用之前需要在全局.scss文件里引用矢量.scss文件，使用@import关键字 三.常见错误及解决办法 官网解释，这种错误不影响小程序
微信小程序使用阿里图标
狂奔的蜗牛
08-28 1021
方法一：使用本地文件 1 下载阿里图标到本地 http://iconfont.cn/    2.转换iconfont.ttf文件（小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64。用网址https://transfonter.org/转换)   3.文件解压 解压后会得到三个文件：de...
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
weixin_60387745的博客
03-07 3869
【微信小程序】如何使用阿里巴巴的icon自定义图标以及简单的下拉框组件实现全过程
微信小程序——阿里巴巴矢量图标用法
yu_lin_ha的博客
08-06 280
1、打开网站 https://www.iconfont.cn/ 2、选择样式 3、添加购物车 4、点击购物车，添加至项目 5、创建项目添加后 6、点击Font class，查看在线链接 7、复制代码，新建网页页面打开 8、回到微信小程序，创建inconfont.wxss文件并粘贴 9、找到全局样式文件，引用 10、使用 ...
基于微信小程序实现爱卡汽车小程序源码分享
06-13
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现美食菜谱小程序源码分享
06-21
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
基于微信小程序实现课程预约小程序源码分享
06-15
3. 图标库： Iconfont-阿里巴巴矢量图标库 这个可以找到自己想要的几乎所有的小图标，十分方便。 4. Easy Mork： easy-mock 用于后台的模拟，得到JSON数据； 5. weui框架引入， 例如个人信息界面，用weui可以很快很...
微信小程序 | 如何引用阿里巴巴Iconfont图标库所给图标
ZM20170703的博客
12-02 827
保姆级教程，小程序中如何引用官方图标
微信小程序里面引用阿里巴巴矢量图（6月份系统升级维护后）
欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈
06-14 1669
微信小程序引入阿里巴巴矢量图，6月份系统升级后，原来的cdn链接不可用了
小程序使用阿里巴巴矢量图标库
m0_71774042的博客
04-23 897
最后点进网址，复制到自己的app.wxss中。点击项目后进入下一步骤。
微信小程序使用阿里巴巴矢量库图标
等风来的博客
10-26 223
微信小程序使用阿里巴巴矢量库图标操作阿里巴巴矢量库操作微信小程序测试是否成功 操作阿里巴巴矢量库 阿里巴巴矢量库地址 搜索需要的图标并加入购物车 点击右上角购物车图标右侧弹出面板点击添加至项目 4. 点击我的项目，然后再点击Font class 再点击查看在线链接 5. 复制类 操作微信小程序 打开微信小程序新建style文件夹以及iconfont.wxss 把之前复制的css 复制进去 导入全局样式 测试是否成功 ！验证通过 ...
微信小程序：引入阿里巴巴矢量图标库iconfont
彭世瑜的博客
11-28 1103
阿里巴巴矢量图标库：https://www.iconfont.cn/ 第一步：生成fontclass地址 将喜欢的icon加入购物车 将购物车中的图标添加至项目 获取项目的Font class地址，打开连接，并复制内容 第二步：引入字体 将Font class内容粘贴到微信小程序项目中 新建文件 static/font/iconfont.wxss 在 app.wxss 文件中引入字体 @import "static/font/iconfont.wxss" 第三步：使用字体图标 第一个为 iconfo
在小程序中使用阿里巴巴矢量图标库
不定时分享最优质的网络技术与教程，满满的干货。
12-11 623
调用的方法有很多种，根据自己项目的实际使用标签来调用，没必要非要使用 i 标签。
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
m0_59971110的博客
02-02 2039
将下载到本地的文件中的iconfont.css拖拽到微信小程序新建的文件夹中。搜索想要的矢量图标并加入购物车，点击右上角购物车。将字体格式设置为TTF Base64。在app.wxss中引入文件。在微信小程序中新建文件夹。将矢量图复制到class中。更改后缀名为wxss。
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
m0_62823653的博客
06-20 7032
由于微信小程序线上的资源限制了各种接口安全域名，所以在小程序里如果想使用iconfont字体图标就会稍有不同，其实只需要把平时的iconfont字体图标远程路径换成base64引入，就可以解决小程序引入iconfont字体图标这个问题了1.将想要的图标添加入库并下载代码：二、下载成功后，将得到一个名为 "download.zip" 的文件，然后解压得到这么一堆文件：推荐去 https://transfonter.org 转换1.配置选项，将配置改为如下红色框所示，并打开 Base64 encode 选项：
微信小程序引入阿里矢量图标库
03-29
要在微信小程序中引入阿里矢量图标库，需要进行以下步骤： 1. 登录阿里矢量图标库（iconfont）官网，搜索需要的图标。 2. 选中需要的图标并加入购物车，然后点击购物车图标，进入购物车页面。 3. 在购物车页面中选择需要下载的图标库类型，如SVG，然后点击“下载代码”，在弹出的框中选择“下载到本地”。 4. 下载完成后，解压文件，将其中的iconfont.css和iconfont.js文件拷贝到小程序的根目录下。 5. 在小程序页面的json配置文件中引入iconfont.css文件，如下所示： ``` { "usingComponents": { "icon": "/iconfont/iconfont" }, "style": "iconfont.css" } ``` 6. 在需要使用图标的页面中，使用icon组件，并设置iconfont的class和type属性，如下所示： ``` <icon class="iconfont" type="icon-xxx"></icon> ``` 其中，type属性值为下载的iconfont.css文件中对应图标的类名。 7. 完成上述步骤后，保存并运行小程序即可使用阿里矢量图标库中的图标。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值