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

最新推荐文章于 2024-12-10 16:07:08 发布
原创 最新推荐文章于 2024-12-10 16:07:08 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #css

博客介绍当项目需求的iconfont彩色图标多于40个时的处理办法，采用将iconfont图标转成base64形式。具体步骤为下载图标解压包，通过cmd进入字体项目输入命令行生成iconfont - weapp文件夹，引入相关css文件即可在项目中使用，小程序同理。
部署运行你感兴趣的模型镜像

当项目需求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>

您可能感兴趣的与本文相关的镜像

Python3.10

Python3.10

Conda
Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

MrBma
关注
使用iconfont彩色图标
aoban0653的博客
03-12 1378
概述：采用下载至本地导入，然后在前端代码里引用这个js。 步骤： 1、找到需要的图片，点击“添加入库” 2、可以添加到项目 3、选择Symbol，下载到本地 4.在本地下载路径中解压，将iconfont.js复制到项目src/assets路径下 ------> 5.在<style>加入通用css代码（引入一次...
微信小程序使用 iconfont 彩色图标
我是写BUG的博客
10-19 584
当您在iconfont.cn中的图标有变更时，只需更改配置。文件中引入全局图标组件，以避免在每个page都引入。其他小程序不支持全局引入，您需要在各自page的。完成后，会在根目录生成对应的文件。，然后再次生成最新的图标组件。这将在项目根目录生成。
阿里云iconfont彩色图标40个数限制
最新发布
fover辉的博客
12-10 613
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
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 中使用彩色图标
bug处理进行时
02-04 1850
如何在 iconfont 中使用彩色图标
iconfont 支持全新的彩色字体图标
u012384510的博客
06-08 1040
大家好，我是若川。iconfont我相信大家都用过，而现在支持全新的彩色字体图标了。这是第二次转载，上一次的好文是2020 前端技术发展回顾。点击下方卡片关注我、加个星标学习源码整体架构系...
iconfont多色图标的使用方法
奔跑的小猪仔
05-22 6236
- Symbol 引用：支持多色图标了，不再受单色限制。 1：去这里下载图片的相关文件https://www.iconfont.cn，具体步骤如下： 1-1）： 1-2）： 2：在本地项目中引入 import './icon/iconfont.js' 或者 <script src="./iconfont.js"></script> 3：加入通用 CSS 代码 ....
uniapp中使用iconfont-tools实现多色图标，并解决在iOS无法显示
weixin_45333006的博客
05-16 1773
uniapp中使用iconfont-tools实现多色图标，解决在ios空白
微信小程序使用阿里iconfont彩色图标
Sudo
11-28 574
注意：如果出现“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方式)
gyueh的博客
06-24 5280
进入https://www.iconfont.cn/官网 将需要的图标添加到购物车，点击购物车将图标添加至相应的目标项目中 打开目标项目，下载代码至本地 将下载的文件进行解压，命名为iconfont Window+R打开控制面版，输入cmd—点击enter键 切换到iconfont文件夹 输入命令行：npm install -g iconfont-tools----点击enter键 运行命令行： iconfont-tools----点击enter键 出现如图所示的内容，按图示输入文件名即可 打开ic.
阿里iconfont 无法改变图标颜色（fontclass，Unicode）
qq_41347187的博客
01-17 992
取消勾选彩色即可
阿里图标库彩色图标使用
qq_40291247的博客
12-02 1828
支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 /**通用css*/ .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; ...
微信小程序开发系列（十三）·如何使用iconfont、微信小程序中如何使用字体图标
时光の尘的博客
03-03 6116
在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，然后方便程序员来进行使用。点击添加至项目，若是没有创建项目，可以先点击红色部分创建项目，最后点击确定。小程序中的字体图标使用方式与 Web 开发中的使用方式是一样的。声明：这不是打广告！
iconfont 使用彩色图标
qq_34870529的博客
11-28 1676
【代码】iconfont 使用彩色图标。
Iconfont-阿里巴巴矢量彩色图标显示黑白解决方法 矢量图标
热门推荐
王敬辉的博客
10-09 1万+
使用阿里图标 iconfont 时发现彩色的图标都变成黑色的了。 查阅后发现 iconfont.css 只能设置单色的图标，要想使彩色图标，需要使用 svg (symbol)模式 Unicode。方法如下 symbol引用（阿里巴巴矢量图标库使用方法） 这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。 特点： 支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那...
iconfont在html种颜色,iconfont+开始支持彩色图标
weixin_35170789的博客
06-16 894
之前发表过一篇关于iconfont图标字体的相关教程，以文字的方式，实现网页中的图标和特殊字符。教程链接可参考：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950前段时间去iconfont官网逛逛，发现iconfont已经升级iconfont+了，对比起之前的iconfont，iconfont+最大的特点是什么呢？iconfont+...
使用阿里字体图标 iconfont 无法改变颜色问题
博客
01-17 1767
但是最近发现了个问题，就是在设置字体图标的颜色时，它失效了，无论怎么弄，图标就是不变色。这搞得一时之间找不到原因所在！字体图标如今在项目中是普遍使用的一种方案，相比较以前的 雪碧图 方案来说，方便了不少。不管是维护还是使用，都大大降低了心智负担，而且很重要的一点，它可以像字体一样通过 CSS 随意设置颜色～找到原因就好解决问题了，我的解决方案是：把字体图标拆分成两个项目，一个全是彩色的，一个全是纯色的。最终结果就是：如果你的字体项目在【字体格式】那里选择了【彩色】，那么这套字体图标的颜色就不允许修改了！
【微信小程序使用单色及彩色阿里巴巴矢量图标库】
regretTAT的博客
05-24 772
微信小程序使用iconfont图标 单色以及彩色
关于阿里矢量图标的普通无色和彩色的使用方法
qq_43235503的博客
08-30 2398
关于阿里矢量图标的普通无色和彩色的使用方法
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值