问题：iconfont引入后 color不起作用（ SVG Symbol引入方式）

最新推荐文章于 2024-08-23 16:40:42 发布
最新推荐文章于 2024-08-23 16:40:42 发布
阅读量3k 收藏
点赞数 1
分类专栏： antDesign iconfont 文章标签： iconfont 字体库工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_33248260/article/details/107099648
版权

原因：

当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在symbol的js文件中程序删除fill属性。

解决方式：

选中需要的图标批量去色，然后就出来效果了

其他链接

业务图标库的生成及引用

参考链接

iconfont的使用，阿里矢量图库的引用，配置，改变图标大小和图标颜色

iconfont图标symbol引用方式，有的图标不能通过设置color样式来修改颜色的解决办法

Fern_blog
关注
专栏目录
iconfont_SVG-file_download:iconfont SVG文件下载 tampermonkey脚本
05-01
这个名为“iconfont_SVG-file_download:iconfont SVG文件下载 tampermonkey脚本”的项目，是利用JavaScript编写的Tampermonkey脚本来实现SVG图标从Iconfont平台的批量下载。 首先，我们需要理解SVG（Scalable ...
通过iconfont-阿里巴巴矢量图标库的Symbol引用，修改颜色不起作用的解决方案
qq_62025051的博客
08-22 327
通过iconfont-阿里巴巴矢量图标库的Symbol引用，修改颜色不起作用的解决方案
使用图标库，Symbol引入iconfont,修改不了图标颜色
ddd239的博客
09-17 1028
使用阿里图标库，Symbol引入iconfont图标,修改不了图标颜色
在vue中使用symbol引用iconfont矢量库
最新发布
m0_49385985的博客
08-23 315
然后就可以直接使用了。
字体图标iconfont无法用color控制和设置颜色的解决方案
孤行者程序之路的博客
05-26 4762
使用阿里巴巴图标库无法用color属性改变图标颜色的问题解决方案
使用 iconfont.cn自定义图标，设置color无效
Cvory
03-09 1568
需求说明： Antd官网API说明中明确写 可以使用设置color改变颜色， 但在实际使用中设置后无效 出现原因及解决： 当上传至图标库时，要选择去掉颜色并提交，这样才可以用color去控制颜色
vue svg组件中svg图标颜色无法修改，解决方案！
weixin_49875932的博客
01-10 2131
1.原因是因为svg源文件中fill 设置了颜色，导致无法通过类名去修改。2.解决方案为 将fill设置为fill="currentColor"
使用阿里字体图标 iconfont 无法改变颜色问题
YM_010530的博客
01-17 1295
但是最近发现了个问题，就是在设置字体图标的颜色时，它失效了，无论怎么弄，图标就是不变色。这搞得一时之间找不到原因所在！字体图标如今在项目中是普遍使用的一种方案，相比较以前的 雪碧图 方案来说，方便了不少。不管是维护还是使用，都大大降低了心智负担，而且很重要的一点，它可以像字体一样通过 CSS 随意设置颜色～找到原因就好解决问题了，我的解决方案是：把字体图标拆分成两个项目，一个全是彩色的，一个全是纯色的。最终结果就是：如果你的字体项目在【字体格式】那里选择了【彩色】，那么这套字体图标的颜色就不允许修改了！
将阿里iconfont下载后包含多个svg图标的文件转换为单个svg文件
05-23
总结，将阿里Iconfont的多个SVG图标文件转换为单个SVG文件，可以借助JavaScript工具如`iconfont-svgs2svg`，通过Node.js环境执行脚本完成合并操作。合并后的SVG文件可以有效减少HTTP请求，优化Web应用的性能，同时...
微信小程序里引入SVG矢量图标的方法
10-16
由于微信小程序对于外部资源加载的限制，无法像常规网页那样直接引入SVG文件，而是需要通过背景图片的方式，并将SVG的XML编码转化为Base64编码。 SVG，全称为Scalable Vector Graphics，是一种基于XML的二维矢量...
详解mpvue小程序中怎么引入iconfont字体图标
10-17
对于ttf文件，有两种引入方式： 1. **本地引入**： 首先，删除原有css文件中引入eot、ttf、svg和woff的部分，只保留base64编码的那行。注意，如果你使用的是iconfont下载的文件，它们已经包含了ttf转base64的代码...
uni-app里引入阿里彩色矢量图标，结果显示黑白的解决方案
前端小白, 稀土：雩风十六
03-19 2775
引入iconfont后，原本彩色的图标变成黑白，彩色部分甚至一坨黑，该问题的解决方案。
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
weixin_55054681的博客
01-07 2524
总结:生成的项目必须是base64，如果按照这些步骤引入的，不生效，4.粘贴到一个css文件夹中(iconfont.css)、直接下载到本地,项目中引入iconfont.css即可。2.创建一个css文件(iconfont.css)第二种.使用class Font class。4.重新生成新的文件夹，引入到项目中。3.加入自己使用的图标，加入购物车。第一种.使用统一码 Unicode。1.点击 Font class。2.注册自己的账户，创建项目。3.html中link引入。1.点击Unicode。
uniapp中使用阿里彩色图标
记笔记
12-30 1141
uniapp中默认只能使用纯色图标，使用纯色图标的方法uniapp官网有可自行查看，如果项目中有使用阿里彩色或多色图标的需求就可借助iconfont-tools工具实现
微信小程序引入阿里巴巴的Iconfont,报错，渲染层错误，failed to load local font
qq_58698137的博客
04-14 656
微信小程序引入阿里巴巴的Iconfont,报错，渲染层错误，failed to load local font
uniapp小程序引用阿里图标报错的解决方案
pgzero的博客
05-09 1438
一、从图标库下载图标至本地 二、把下载下来的iconfont.css文件放入项目 三、复制在线链接代码到iconfont.css并替换@font-face（注：只需留src只需要留ttf格式地址） 四、在文件的style中引入文件 @import url('/static/icon/iconfont.css'); 五、在组件中使用即可 ...
小程序引用阿里巴巴图标库的彩色图标
csdn_zym1101的博客
11-11 346
前提：下载好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引入后不能变色的问题
Anyz Notebook
06-11 5183
项目中使用iconfont作为图标库，更新后发现icon颜色不会随着设置颜色改变，下载的是svg格式。 项目框架用的icon是可以变色的，所以打开可以变色的icon的文件和新下载的文件对比后发现： 新下载的icon的svg文件有写入 fill="#333333" 就是在下载svg文件时候，iconfont是有设置初始色的，把对应设置删除后尝试，可以正常使用。 在iconfont库有批量去色的按钮，可以批量处理。 css样式可以设置 #svg: { fill: red; } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值