微信小程序使用彩色图标（阿里巴巴矢量图标库）（炒鸡详细）

最新推荐文章于 2025-04-11 15:45:16 发布
原创 最新推荐文章于 2025-04-11 15:45:16 发布 · 3.3k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

前言废话

本来一直都是用的阿里巴巴矢量图标库中的单色图标，那样就简单，把素材代码文件下载一下，再复制到项目文件里就行了。可是前几天突然有个需求是用彩蛇图标当用户的头像，我以为按照原来的操作可行，结果原来可可爱爱的图标变成了一个黑色圆点。这可愁死我了，于是马上问度娘，原来是要下载插件，最后顺利的完成了需求。现在有空了就来整理一下操作顺序，希望能帮到像我几天前那样的小伙伴。

配置环境变量

如果已经安装过nodejs的小伙伴自动跳过

第一步，下载安装nodejs

1、下载

我的电脑是windows10 64位的

官网下载地址
在这里插入图片描述

2、安装

在这里插入图片描述
在这里插入图片描述
自己设置安装路径
在这里插入图片描述
这一步也直接next

最低0.47元/天 解锁文章
阿里图标库symbol使用手册【小程序】
u013236718的博客
08-07 839
1、小程序开启使用npm模块；2、小程序项目根目录不要有iconfont目录，否则会清空里面所有内容；3、有nodejs环境；在小程序项目根目录，使用npm安装mini-program-iconfont-cli插件；
uni-app引用阿里巴巴官方图标库
二十岁的程序员想搞钱
05-09 1024
最近在学习uni-app时，需要用到阿里巴巴的官方图标库，图标全部导入项目会使项目运行缓慢，因此使用网络路径的方式 目录1.阿里巴巴图标库2.引入文件3.使用图标4.总结 1.阿里巴巴图标库 本节主要介绍如何在阿里巴巴图标库中查找图标并将其加入项目； 阿里巴巴矢量图标库网址如下阿里巴巴图标库，进入后点击官方图标库 进入官方图标库后，点击第一个图标库 由于挨个点击加入项目比较麻烦，这里在控制台输入以下代码： var iconList = document.querySelectorAll('.icon-g
微信小程序素材库
05-23
微信官方小程序素材库（ps格式）可以直接用ps打开查看，对比wxss颜色等信息
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
张营的技术博客
12-17 1672
把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。
卧槽！微信图标现在可以换颜色了？
iOS_开发
11-12 937
来源：发现科技2011年的1月21日，微信诞生了。看惯了这个绿色的图标，有没有想过给它换个骚气蓬勃的颜色？今天，给大家分享一个随意更改微信图标颜色的方法，各种颜色都有，安卓苹果都适用。...
微信小程序使用 Symbol 类型彩色图标
子兮曰
07-23 920
# 1. 准备工作 //->小程序开启使用npm模块； //->小程序项目根目录不要有iconfont目录，否则会清空里面所有内容； //->有nodejs环境； # 2. 第一步： 在小程序项目根目录，使用npm安装mini-program-iconfont-cli插件； yarn add mini-program-iconfont-cli --dev // 或 npm install mini-program-iconfont-cli --save-dev # 3. 第二步:..
微信小程序使用色彩字体图标（笔录）
周周池的博客
08-25 739
微信小程序怎么使用色彩字体图标 在阿里巴巴矢量图标库选择对应图标，添加到自己的项目中，下载到本地 通过npm全局导入iconfont-tools工具，语法：npm i -g iconfont-tools 再iconfont-tools // 生成小程序专用文件（可以取名字也可以使用默认名称，使用默认名称就一直enter） 得到如下文件目录结构，iconfont-weapp就是小程序色彩图标文件 把iconfont-weapp中css文件拷贝到项目中，在app.vue中全局导入ico
怎么样使用阿里巴巴矢量图标库中的图标并将其用在微信小程序中
最新发布
11-28
根据用户的问题，用户希望了解在微信小程序中使用阿里巴巴矢量图标库（Iconfont）的方法。结合提供的引用内容，我们可以整理出两种主要方法：使用在线链接和下载到本地。同时，引用[4]提到了彩色图标的使用方法，...
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 509
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
微信小程序如何使用阿里巴巴矢量图标库彩色图标
徐三岁的博客
08-12 616
1.安装iconfont-tools包 npm i -g iconfont-tools 2.将需要使用的彩色图标下载到本地 3.打开下载的图标文件 4.在命令行工具运行 iconfont-tools命令,生成iconfont-weapp文件 在这里插入图片描述 5.将iconfont-weapp文件夹中iconfont-weapp-icon.css文件放到项目中 6.项目中使用 class="icon icon-mianxingbeizi" ...
微信小程序图片素材 微信小程序图片素材
10-26
微信小程序图片素材，
微信小程序UI设计素材库（必备）.zip
12-23
微信小程序UI设计素材库（必备）.zip
微信小程序UI设计必备素材库.zip
03-26
小程序所用到的各种图标都为你收集全了，还有各种模板样式，源文件，字体包，以及基础控件等。还有还等什么
微信小程序/网页/app/android等各种bar图标导航图标文章图标标题图标下拉/检索收藏上传客服等图标整理
05-01
微信小程序/网页/app/android等各种bar图标导航图标文章图标标题图标下拉/检索收藏上传客服等图标整理
微信小程序开发必备100Tip 图片+源码
12-23
微信小程序开发必备100Tip 图片+源码，非电子书！只需1分，一方面方便自己下载其他资源，一方面为需要的网友提供资源。
小程序引用阿里巴巴图标库的彩色图标
csdn_zym1101的博客
11-11 503
前提：下载好Node，打开DOS窗口，输入node -v查看是否安装成功 1.右击小程序所在项目文件夹，打开该文件夹的powerShell命令窗口 输入命令 npm install mini-program-i confont-cli --save-dev 该命令是把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。 2.输入命令 npx iconfont-init 3.打开iconfont.json文件，如果npx iconfont-init没有成功，则不会显示
微信小程序引入iconfont彩色图标
赵思远的博客
06-22 1200
小程序引用iconfont前两种不支持彩色，必须使用symbol，使用方法如下： 引用方法名 支持多色 兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序项目根目录输入命令： npm install mini-program-iconfont-cli --save-dev 2.根目录生成iconfont.json文件： npx iconfont-init 3.打开json文件...
【亲测免费】 微信小程序UI设计素材库（必备）
gitblog_06759的博客
04-11 617
微信小程序UI设计素材库（必备） 【下载地址】微信小程序UI设计素材库必备 微信小程序UI设计素材库（必备）是一个专为开发者和设计师打造的优质资源包，内含丰富的UI元素，如按钮、图标、背景、组件等，可快速提升微信小程序的界面设计效果。所有素材均经过精心设计，风格统一，适配性强，帮助用户轻松构建专业且美观的小程序界面。无论...
小程序中使用彩色图标（阿里iconfont）
qq_42961150的博客
09-08 970
前言 字体图标我相信大家都很熟悉，阿里图标库官网：https://www.iconfont.cn/ 一般我们在开发的时候，都是使用iconfont来管理项目里面的图标。但是我们该如何在小程序中使用彩色的字体图标？ 效果图： 使用步骤 1. 首先就是下载自己需要的彩色图标 2. 解压下载的文件后，进入相应文件打开黑窗口（cmd/git都可以），全局安装iconfont-tools（npm i -g iconfont-tools）,然后运行iconfont-tools，生成iconfont-weapp文
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值