使用图标库，Symbol引入iconfont,修改不了图标颜色

已于 2022-09-17 23:09:35 修改
阅读量967 收藏
点赞数 1
文章标签： 前端
于 2022-09-17 23:07:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ddd239/article/details/126912054
版权
  • 使用阿里图标库，Symbol引入iconfont时,发现修改不了颜色

  •  color属性修改颜色不生效，是因为有的图标用的时fill属性定义颜色 ，用fill就可以了
  • （svg图标带有fill属性，图标库自带颜色，也可以下载本地前修改需要的颜色）

荨麻疹.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
修改iconfont图标颜色
qq_41742961的博客
11-02 2282
<svg t="1635862467503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3698" width="200" height="200"><path d="M812.35 724.75H365.5c-50 0-90.58-42.25-90.58-94.37V366.16c0-52.12 40.55-94.36 90.58-94.36h44
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在vue中使用阿里巴巴黑白图标和彩以图标,font-class（黑白小图标）Symbol（彩色图标）可调大小
svg 图标颜色无法修改的问题
a432143的博客
06-20 4116
iconfont图标symbol引用方式，有的图标不能通过设置color样式来修改颜色的解决办法 现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。 <svg class="icon" aria-hidden="true" style="color:red;...
react+ umi 使用iconfont,实现更改图标颜色
weixin_50745161的博客
12-29 3133
1.线上引用，这种无法更改图标颜色 import { createFromIconfontCN } from '@ant-design/icons' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_2242890_ffxnfeb837a.js' }); 2.下载到本地 将下载下来的文件夹放到assets文件夹下，自己命名一个名称 将iconfont.js文件提取出来放到public文件夹
阿里iconfont的Symbol图标颜色无法改变
cc的博客
06-12 881
今天在vue3里面引入图标，去阿里图标库看了一下，Symbol可能是以后的趋势，就使用这个方式在项目里，中途一切顺利，就是等到改变图标颜色死活改不动，包括更改svg里面的fill属性也没反应。操作完后重新生成代码，在复制进去iconfont.js里面，这时候就可以通过更改fill属性来改变Symbol图标颜色了。到这一步图标就可以出来了，但是就是改变不了颜色，遂疯狂百度查到是iconfont生成的源代码里面。然后在阿里图标官网有个批量操作。属性默认有颜色，导致改不了。4 vue文件内使用组件。
iconfont图标不能修改颜色解决方案
qq_41920758的博客
10-14 4551
这是因为那些本来就有颜色的icon或者自己选择了颜色的icon下载用到项目里之后就无法改变颜色了。有颜色的icon会在svg的path中增加fill属性，所以无法更改颜色。下载js文件后，用编辑器打开，然后用正则表达式查找：fill="#......" ，进行替换。把要下载的icon添加到项目中，然后在我的项目中选择批量操作，接着选择icon，点击批量去色。在做项目的时候我发现下载的icon有的可以修改颜色而有的不能。，然后在vue.config.js中进行配置（代码加在。
问题：iconfont引入后 color不起作用（ SVG Symbol引入方式）
sinat_33248260的博客
07-03 2972
原因： 当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg的path中增加fill属性，导致无法更改颜色，如果需要动态修改颜色，需要从新添加该图标(本身图标无色)，获取在symbol的js文件中程序删除fill属性。 解决方式： 选中需要的图标批量去色，然后就出来效果了 参考链接 iconfont的使用，阿里矢量图库的引用，配置，改变图标大小和图标颜色 iconfont图标symbol引用方式，有的图标不能通过设置col
解决iconfont图标symbol引用方式，图标不显示及不能变色的问题
fangcaojushi的博客
06-28 2114
解决iconfont图标无法改色 图标改色的关键是改color,还是改fill
iconfont 的symbol字体如何修改颜色 / svg如何修改颜色？
m0_66051368的博客
08-24 851
svg
阿里巴巴iconfont svg图标不能更改颜色的解决方法，iconfont symbol怎么改颜色
qq_37568942的博客
10-12 4839
1.svg图标 带有 fill 属性，默认是带有颜色的，想要修改先把原fill颜色去掉，如下： 2. 在代码种修改对应颜色即可 使用 svg 图标： <svgclass="svg"aria-hidden="true"> <usexlink:href="#icon-test"></use> </svg> css 修改颜色： .svg{ height:20px;width:20px; } .svg:last...
iconfont阿里图标引入不生效的解决方法,三种引入方式详细步骤。
weixin_55054681的博客
01-07 2332
总结:生成的项目必须是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。
react-iconfont-cli:转换iconfont图标为React标准组件，不依赖字体，支持多色彩
05-25
2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件，支持es6和typescript两种文件格式 Step 1 安装插件 # Yarn yarn add react-iconfont-cli --dev # Npm npm install react-iconfont-cli --save-dev ...
react项目如何使用iconfont的方法步骤
12-08
项目中通常会使用iconfont作为图标显示的解决方案，这里介绍下如何在项目中配置。 准备工作 首先配置好项目，关键需要注意FontClass/Symbol 前缀和Font Family两个配置。 当我们配置好项目之后，就可以导出样式文件...
vue-iconfont：更优雅地使用Iconfont.cn，同时支持font-class♡和symbol丨
02-05
Vue Iconfont更优雅地使用 ，同时支持font-class 引入和symbol 引入。安装# Yarnyarn add vue-iconfont# npmnpm i vue-iconfont CDN： | （可通过window.VueIconfont使用）使用首先用Vue.use安装VueIconfont ： ...
设计利器 Sketch 中 Symbol 的使用
03-29
下面介绍其中一个功能 Symbol 的使用方法。 在软件设计中，有很多地方可以重复使用，例如导航栏。这时候就把导航栏转为 Symbol , 下次需要用到时直接插入。 (此图片来源于网络，如有侵权，请联系删除! ) 大家都知道...
Iconfont 使用及demo（单色、多色、渐变色） 案例demo
Make
01-21 1692
IconFont 图标的3种引用方式 新版Iconfont-阿里巴巴矢量图标库支持三种引用方式： 1.unicode引用（原始） unicode是字体在网页端最原始的应用方式，特点是： 兼容性最好，支持ie6+，及所有现代浏览器。 支持按字体的方式去动态调整图标大小，颜色等等。 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。 注意：新版ico...
svg图标加上fill=“currentColor“设置颜色时无效解决办法
qq_36660135的博客
06-13 4142
有些 SVG 图像在定义中已经设置了 fill 属性，这可能会导致手动更改填充颜色无效。要解决这个问题，可以通过以下方法来移除 SVG 自带的 fill 填充属性。下图中的个人中心图标是在iconfont中下载的，可以看出改变fill属性颜色时其不受影响。可以用电脑自带写字板打开svg图标，或者用文本编辑器打开图标，收搜索fill，删除掉改行样式，保存。下面是修改成功后的结果，可以自行修改颜色。
iconfont svg图标引用后不能用fill更改颜色的解决方法
第二世界
01-27 4179
用iconfont自带的批量去色功能解决 今天在使用 Symbol 代码引用图标时发现，设置颜色后，有一部分图标还是显示原始的颜色。原来这部分 svg图标带有 fill 属性，这种图标不能本地修改 fill 属性，需要在项目中移除默认颜色。 ...
symbol 对象中出现symbol
最新发布
10-19
Symbol对象是ES6中新增的一种基本数据类型，它表示独一无二的值。在对象中使用Symbol类型作为属性名时，可以保证属性名的唯一性，避免属性名冲突的问题。当一个Symbol对象作为一个属性的键时，这个对象将被强制转换为它包装过的symbol值。因此，使用Symbol类型作为属性名时，可以避免属性名被意外修改或覆盖的问题。同时，Symbol类型还可以用于创建全局唯一的标识符，可以通过Symbol.for()方法来创建全局唯一的Symbol对象。需要注意的是，Symbol类型的值是不可变的，一旦创建就不能修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值