微信小程序引入iconfont彩色图标

最新推荐文章于 2023-12-13 09:32:30 发布
最新推荐文章于 2023-12-13 09:32:30 发布
阅读量1.1k 收藏 12
点赞数 4
分类专栏： 微信小程序 文章标签： 小程序 iconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38045993/article/details/118090779
版权

 

小程序引用iconfont前两种不支持彩色，必须使用symbol，使用方法如下：

引用方法名支持多色兼容性
unicode×好
font-class×良好
symbol√差

1.小程序项目根目录输入命令：

npm install mini-program-iconfont-cli --save-dev

2.根目录生成iconfont.json文件：

npx iconfont-init

3.打开json文件，将symbol_url替换成iconfont项目生成的js

4.生成iconfont组件(根目录)

npx iconfont-wechat

5.app.json中引入iconfont组件

6.页面引用

 <iconfont name="ic_px_nor" class="iconStyle"/>

如果更新了iconfont项目，就重新生成js文件，替换iconfont.json里面的地址，再执行一次步骤4就可以了

微信小程序使用彩色图标（阿里巴巴矢量图标库）（炒鸡详细）
mycocoo的博客
08-08 3002
前言废话 本来一直都是用的阿里巴巴矢量图标库中的单色图标，那样就简单，把素材代码文件下载一下，再复制到项目文件里就行了。可是前几天突然有个需求是用彩蛇图标当用户的头像，我以为按照原来的操作可行，结果原来可可爱爱的图标变成了一个黑色圆点。这可愁死我了，于是马上问度娘，原来是要下载插件，最后顺利的完成了需求。现在有空了就来整理一下操作顺序，希望能帮到像我几天前那样的小伙伴。 配置环境变量 如果已经安装过nodejs的小伙伴自动跳过 第一步，下载安装nodejs 1、下载 我的电脑是windows10 64位的
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 469
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序使用iconfont阿里矢量多色图标
一出好剧
01-02 3143
微信小程序端使用iconfont的多色模式
微信小程序使用 iconfont 彩色图标(mini-program-iconfont-cli)
张营的技术博客
12-17 1565
把iconfont图标批量转换成多个平台小程序的组件。不依赖字体，支持多色彩。
微信小程序使用iconfont彩色图标，真机上不显示
gyueh的博客
07-02 1523
原代码cover-view中使用iconfont彩色图标：图标在模拟器上正常显示，但是在真机上不显示 <cover-view class="t-icon t-icon-ABC"></cover-view> 解决方案如下：将cover-view标签改为view标签即可，其他部分不变 <view class="t-icon t-icon-ABC"></view> ...
微信小程序引入iconfont
weixin_44530406的博客
05-13 482
登录iconfont，打开项目。 下载到本地，打开文件夹将iconfont.css中的样式中的代码粘贴到小程序app.wxss中。 点击查看在线链接,生成代码。 在utils文件夹新建一个wxss文件，将复制复制的在线链接粘贴到这里，最后代码如下图。 icon的名字不好使用，可以自定义每个icon的类名，类似这样。 最后我们在wxml中引用。 渲染图。 ...
微信小程序引入iconfont彩色图标(Symbol方式)
gyueh的博客
06-24 5153
进入https://www.iconfont.cn/官网 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中 打开目标项目，下载代码至本地 将下载的文件进行解压，命名为iconfont Window+R打开控制面版，输入cmd—点击enter键 切换到iconfont文件夹 输入命令行：npm install -g iconfont-tools----点击enter键 运行命令行： iconfont-tools----点击enter键 出现如图所示的内容，按图示输入文件名即可 打开ic.
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 526
注意：如果出现“permission denied”等error信息，记住加上 sudo指令。4️⃣ 最终生成 iconfont-weapp-icon.wxss文件，放在项目中。5️⃣-1️⃣ app.wxss中引入wxss文件以及设置全局样式。2️⃣ 下载iconfont文件同时cd 切换到该目录。iconfont-tools // 生成小程序专用文件。icon开头的名称，都变成t-icon。5️⃣ 其他补充以及使用。5️⃣-2️⃣ 使用。
微信小程序篇---如何使用iconfont彩色图标---Symbol类型
qq_42001842的博客
01-13 8481
前言 今天在学习做微信小程序时，有需求要引用到大量iconfont彩色图标，因为我们一般用的都是iconfont单色图标，直接导入它的css文件就OK了，但是在使用彩色图标话，需要用到Symbol类型，会发现微信小程序不支持svg，后面在百度了大量文章后。。。 跟着步骤一步一步来： 第一步：安装插件 --- mini-program-iconfont-cli 在根目录中打开命令窗口...
UNIAPP小程序使用ICONFONT彩色图标
Fairy_Yss的博客
11-27 465
UNIAPP小程序使用ICONFONT彩色图标 标签： 微信 1、进入阿里巴巴矢量图标库https://www.iconfont.cn/，添加图标到项目，然后下载至本地 解压后的本地文件如下 2、下载iconfont-tools npm install -g iconfont-tools 进入解压后的文件夹，如上图所示目录，命令行运行 iconfont-tools 然后一直enter,然后就会多出来一个iconfont-weapp的文件夹 进入文件夹,将其中的iconfont-weapp-icon
微信小程序引入iconfont图标
LiXiao_Lan的博客
07-08 1188
iconfont图标库里，当有‘查看在线链接’按钮时，点击复制“Font Class”的链接，在浏览器里面打开链接，复制里面的内容到小程序上面就行了，扩展名改成“.WXSS”当没有在线链接时候，我们就要‘下载到本地’，下载好了之后，就有一个压缩好的文件夹，我们只要里面的这四个文件，css文件里面的内容复制到小程序后缀名为‘.wxss’文件，............
微信小程序引入iconfont错误 提示！
Remo_jun的博客
09-07 630
首先看微信小程序引入iconfont 如果还是引用错误，那就是在更改成wxss时步骤错误：先把下载的css的文件改成wxss，再去引用！！！！
微信小程序如何引入彩色iconfont图标？
最新发布
a896532147的博客
12-13 1069
3，打开iconfont文件将文件名称为”iconfont-weapp“复制到小程序艮目录下，并创建文件名称为”",将你创建的项目下载到本地解压并命名为”iconfont“,在文件”iconfont“下。点击”enter“等到运行结果，如果系统提示找不到npm命令，那就先安装node.js。4，引用：在小程序的app.wxss文件中引入。出现如下内容，点击enter默认即可。">（去掉icon-)1，在阿里云矢量图官网："style"的文件夹下，
小程序中使用彩色图标（阿里iconfont）
qq_42961150的博客
09-08 914
前言 字体图标我相信大家都很熟悉，阿里图标库官网：https://www.iconfont.cn/ 一般我们在开发的时候，都是使用iconfont来管理项目里面的图标。但是我们该如何在小程序中使用彩色的字体图标？ 效果图： 使用步骤 1. 首先就是下载自己需要的彩色图标 2. 解压下载的文件后，进入相应文件打开黑窗口（cmd/git都可以），全局安装iconfont-tools（npm i -g iconfont-tools）,然后运行iconfont-tools，生成iconfont-weapp文
微信小程序：手把手引入iconfont图标
weixin_43534071的博客
05-16 504
转载自：https://www.jianshu.com/p/1af8b965057b 引入iconfont图标 在https://www.iconfont.cn/中选择要使用的图标
【自记】在App中或者小程序中，引入iconfont 图标的问题
foreversilent的专栏
12-30 1444
在小程序和IOS中，引入静态的woff、ttf字体文件，是不能识别的，需要将文件进行一次转换 1、进入https://transfonter.org/ 2、上传 woff 文件或者 ttf 文件 3、 4、将Convert 之后得到的 style.css文件中的内容，拷贝出来，替换入 iconfont.css 的@font-face 5、使用iconfont中的class name 直接使用即可 <v-icon class="iconfont iconhome">&lt...
小程序通过不同数据显示不同时间段色块区间颜色
qq_36344795的博客
06-29 1181
样式图： WXML: <view class="await-time"> <text class="await-time-text">温馨提示：您可以选择空闲时段进行问诊</text> <view class="await-time-quantum"> <view class="await-time-quantum-section"> <view class="time-quantum
微信小程序iconfont小图标的引入和使用
weixin_50032315的博客
07-07 484
微信小程序中的想要引入字体样式的时候是不支持的，那么我们有时候却需要这个功能所以接下来去介绍一下怎么去引入iconfont的图标库。 1.打开iconfont http://www.iconfont.cn/ 2.新建个项目 3.选择你需要的图标添加到购物车。 4.点击右上角的购物车，把这个图标添加到你的项目中。 5.打开你的项目，点击下载到本地 6.随便解压出来找到iconfont.css文件 7.在你小程序的根目录下创建个styles文件夹，文件夹中新建一个iconfont.wxss的文件，
小程序中使用Symbol类型的iconfont
weixin_67585820的博客
04-15 972
iconfont官网文档：https://www.iconfont.cn/help/detail?helptype=code 官方文档中没有小程序的方法，而且小程序不支持svg标签，想在小程序中使用图标可以看看下面的方法 原理是将官方提供的svg转成了svg背景图片，这样就解决了小程序不支持svg标签的问题，这样小程序也可以自由的使用图标了，还支持多色图标。 一、安装插件 npm install mini-program-iconfont-cli --save-dev 二、生成配置文件 npx iconf
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值