教你如何跨越iconfont彩色图标40个个数限制

最新推荐文章于 2024-12-10 16:07:08 发布
最新推荐文章于 2024-12-10 16:07:08 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36765732/article/details/127515197
版权
博客介绍当项目需求的iconfont彩色图标多于40个时的处理办法，采用将iconfont图标转成base64形式。具体步骤为下载图标解压包，通过cmd进入字体项目输入命令行生成iconfont - weapp文件夹，引入相关css文件即可在项目中使用，小程序同理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当项目需求iconfont彩色图标在40个以内时，咱们可以用常规方法做，但是当彩色图标多于40个时，这就要想办法了，目前试验了下，采用的是将iconfont图标转成base64这种形式，步骤如下

1.下载iconfont图标，解压包

2.cmd进入字体项目,输入命令行 iconfont-tools，这时项目会 生成一个iconfont-weapp文件夹

然后你引入iconfont-weapp-icon.css这个文件，那么在项目中就可以使用了

<div class="t-icon t-icon-wu"></div>

小程序也一样

<view class="t-icon t-icon-wu"></view>

MrBma
关注
什么？Iconfont终于可以支持彩色图标了
zzc19981221的博客
12-06 1775
如果你对iconfont有所了解，那你一定对这次iconfont做出的更新产生兴趣。没错，iconfont目前已经升级为iconfont+，并且能够支持大家都很期待的彩色图标。 之前，大家也以文字的形式实现过网页中的图标和特殊字符，现在，使用全新的彩色图标一定更能体现 symbol引用: 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实...
uniapp项目使用iconfont彩色图标
weixin_43926731的博客
09-16 2365
uniapp项目使用iconfont彩色图标 在uniapp项目中使用阿里云iconfont图标时会发现自己明明添加的是彩色icon，但是在项目中显示的还是黑色图标，和自己想要的效果不同，那可以用一下的方法完美使用彩色icon。 搜索图标 打开icongont官网搜索自己想要的图标，以微信图标为例。 点击自己想要的彩色图标加入到购物车，再点击添加至项目 根据项目需要添加到自己的项目文件夹中，第一次使用的话可以自行创建一个文件夹 下载到本地 这个地方选择Font class，然后点击下载至本地 解压压缩
flutter-iconfont-cli:在flutter中使用iconfont图标，不依赖字体，支持多色彩
05-06
flutter-iconfont-cli 用纯JS把iconfont.cn的图标转换成Flutter Widget，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件 Step 1 在项目文件pubspec.yml中加入flutter插件 flutter_svg { ... dependencies: # 版本号请以官方库的为准：https://pub.dev/packages/flutter_svg flutter_svg: ^0.19.3 ... } 然后执行flutter插件安装操作 flutter packages get 接着安装全局插件（基于nodeJs） npm install flutter-iconfont-cli -g Step 2 生成配置文件 npx iconfon
阿里云iconfont彩色图标40个数限制
最新发布
fover辉的博客
12-10 371
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
如何在 iconfont 中使用彩色图标
bug处理进行时
02-04 1672
如何在 iconfont 中使用彩色图标
iconfont 支持全新的彩色字体图标
u012384510的博客
06-08 1000
大家好，我是若川。iconfont我相信大家都用过，而现在支持全新的彩色字体图标了。这是第二次转载，上一次的好文是2020 前端技术发展回顾。点击下方卡片关注我、加个星标学习源码整体架构系...
iconfont多色图标的使用方法
奔跑的小猪仔
05-22 6189
- Symbol 引用：支持多色图标了，不再受单色限制。 1：去这里下载图片的相关文件https://www.iconfont.cn，具体步骤如下： 1-1）： 1-2）： 2：在本地项目中引入 import './icon/iconfont.js' 或者 <script src="./iconfont.js"></script> 3：加入通用 CSS 代码 ....
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 466
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 524
注意：如果出现“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彩色图标
aoban0653的博客
03-12 1322
概述：采用下载至本地导入，然后在前端代码里引用这个js。 步骤： 1、找到需要的图片，点击“添加入库” 2、可以添加到项目 3、选择Symbol，下载到本地 4.在本地下载路径中解压，将iconfont.js复制到项目src/assets路径下 ------> 5.在<style>加入通用css代码（引入一次...
uniapp中使用iconfont-tools实现多色图标，并解决在iOS无法显示
weixin_45333006的博客
05-16 1531
uniapp中使用iconfont-tools实现多色图标，解决在ios空白
阿里图标库彩色图标使用
qq_40291247的博客
12-02 1791
支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 /**通用css*/ .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; ...
阿里iconfont 无法改变图标颜色（fontclass，Unicode）
qq_41347187的博客
01-17 920
取消勾选彩色即可
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 5729
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
iconfont 使用彩色图标
qq_34870529的博客
11-28 1551
【代码】iconfont 使用彩色图标。
Iconfont-阿里巴巴矢量彩色图标显示黑白解决方法 矢量图标
热门推荐
王敬辉的博客
10-09 1万+
使用阿里图标 iconfont 时发现彩色的图标都变成黑色的了。 查阅后发现 iconfont.css 只能设置单色的图标，要想使彩色图标，需要使用 svg (symbol)模式 Unicode。方法如下 symbol引用（阿里巴巴矢量图标库使用方法） 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。 特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那...
iconfont在html种颜色,iconfont+开始支持彩色图标
weixin_35170789的博客
06-16 857
之前发表过一篇关于iconfont图标字体的相关教程，以文字的方式，实现网页中的图标和特殊字符。教程链接可参考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950前段时间去iconfont官网逛逛，发现iconfont已经升级iconfont+了，对比起之前的iconfont，iconfont+最大的特点是什么呢？iconfont+...
使用阿里字体图标 iconfont 无法改变颜色问题
YM_010530的博客
01-17 1554
但是最近发现了个问题，就是在设置字体图标的颜色时，它失效了，无论怎么弄，图标就是不变色。这搞得一时之间找不到原因所在！字体图标如今在项目中是普遍使用的一种方案，相比较以前的 雪碧图 方案来说，方便了不少。不管是维护还是使用，都大大降低了心智负担，而且很重要的一点，它可以像字体一样通过 CSS 随意设置颜色～找到原因就好解决问题了，我的解决方案是：把字体图标拆分成两个项目，一个全是彩色的，一个全是纯色的。最终结果就是：如果你的字体项目在【字体格式】那里选择了【彩色】，那么这套字体图标的颜色就不允许修改了！
【微信小程序使用单色及彩色阿里巴巴矢量图标库】
regretTAT的博客
05-24 719
微信小程序使用iconfont图标 单色以及彩色
WPF实现FontAwesome与IconFont图标的简易教程
使用方法通常与FontAwesome类似，但可能在图标资源和引用方式上有所不同，具体取决于你选择的IconFont库。 ### 扩展代码 除了基本的使用方法，你还可以编写一些扩展代码来进一步提升使用体验： 1. **封装图标字典...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值