Skip to content

图标的颜色怎么修改呀 #330

@SPACEX-2022

Description

@SPACEX-2022

你好,是这样的,我把代码拷贝到我的项目里,图标是可以显示的,但是颜色却不能通过color去设置,请问是有什么要注意的地方吗?

Activity

PanJiaChen

PanJiaChen commented on Dec 6, 2017

@PanJiaChen
Owner

svg-icon 默认会读取其父级的color fill: currentColor;

你可以改变父级的color或者直接改变fill的颜色即可。

SPACEX-2022

SPACEX-2022 commented on Dec 6, 2017

@SPACEX-2022
Author

大佬我就是这样做的, 但是颜色却没有改变。
更奇怪的是,我直接修改fill的颜色也没作用。

PanJiaChen

PanJiaChen commented on Dec 6, 2017

@PanJiaChen
Owner

image
image

实测可行,请确保没有样式覆盖问题。

SPACEX-2022

SPACEX-2022 commented on Dec 6, 2017

@SPACEX-2022
Author

大佬我发现了,从你这项目拷贝过去的svg就可以改颜色,但是我从iconfont下载的svg就不行,

PanJiaChen

PanJiaChen commented on Dec 6, 2017

@PanJiaChen
Owner

我项目里所有的icon都是从iconfont上面下载的。。。

SPACEX-2022

SPACEX-2022 commented on Dec 6, 2017

@SPACEX-2022
Author

刚刚打开看了下svg的源代码,原来下载下来的path上面自带了fill属性......

SPACEX-2022

SPACEX-2022 commented on Dec 6, 2017

@SPACEX-2022
Author

请问大佬有啥办法可以使下载的图标不自带fill属性吗,我下载的都有, 这样一个一个改岂不是很麻烦。。。

PanJiaChen

PanJiaChen commented on Dec 6, 2017

@PanJiaChen
Owner

样式覆盖不就好了 设置的时候加一个 !important

SPACEX-2022

SPACEX-2022 commented on Dec 7, 2017

@SPACEX-2022
Author

好的,多选大佬

busyhe

busyhe commented on Apr 18, 2018

@busyhe

@540240126 你是怎么弄的,我的也不行

busyhe

busyhe commented on Apr 19, 2018

@busyhe

@PanJiaChen 能举个例子吗,用!important也不行

PanJiaChen

PanJiaChen commented on Apr 19, 2018

@PanJiaChen
Owner

@busyhe 请提供demo

busyhe

busyhe commented on Apr 19, 2018

@busyhe

@PanJiaChen
https://github.com/wfe-templates/template-build
这是我写模板,麻烦帮忙看一下,
在template/sec/pages/home/home.vue里。
官方提供的可以改颜色,阿里下载的就不行

19 remaining items

whace

whace commented on Nov 15, 2019

@whace

怎么让图标和字体一上一下,就是图标在上,字体在下

baojiawei

baojiawei commented on Mar 2, 2020

@baojiawei

我在iconfont下载的icon,设置到左侧导航的图标时,总是比模版中icon的看起来要小一些,我看模版中的icon预览的时候左右两边都没有多余的空白,我下载的在预览的时候左右两边都有空白,是这个原因吗?要怎么解决呢?以下是svg的内容:

解决了吗,这个问题

fewbadboy

fewbadboy commented on Mar 2, 2020

@fewbadboy
aclemon

aclemon commented on Apr 29, 2020

@aclemon

为什么我需要导入 才能用

JasonLamv-t

JasonLamv-t commented on Jun 16, 2020

@JasonLamv-t

下载的时候把颜色代码删除,下载下来的svg有的是没有fill字段

Jenssic

Jenssic commented on Jun 24, 2020

@Jenssic

我使用了@yuanyuanyuan给的建议从http://iconfont.cn/ 下载默认图标是可以通过color改变图标颜色(没有fill属性),但发现其中也有不可以通过color改变图标颜色(有fill属性)。
其中“如果您选择一个把颜色调整为白色或其他颜色,就可以看到变色效果了”,我也实践了一下,我这边是不可以的(有fill属性)
然后我猜想可能和上传图片是选项有关,发现有两个选项一个是"去除颜色并提交“一个是“保留颜色并提交”。选中”去除颜色并提交选项并提交即可。这里还需要注意的是绘制icon软件要用AI。这里是网上查到的为什么要用AI的原因https://www.urcloud.co/archives/94/
最后实践是可以的。

qq823626715

qq823626715 commented on Jul 3, 2020

@qq823626715

我在iconfont下载的icon,设置到左侧导航的图标时,总是比模版中icon的看起来要小一些,我看模版中的icon预览的时候左右两边都没有多余的空白,我下载的在预览的时候左右两边都有空白,是这个原因吗?要怎么解决呢?以下是svg的内容:

解决了吗,这个问题

图标可以编辑,下载之前编辑放大,不留空白就好

walirt

walirt commented on Jul 13, 2020

@walirt

@PanJiaChen 请问下多色的需要怎么处理 页面上的fill属性都被删除了 显示是全黑的

hu-qi

hu-qi commented on Sep 28, 2020

@hu-qi

image

尴尬,各位大佬这个白色背景怎么去掉?

hu-qi

hu-qi commented on Sep 28, 2020

@hu-qi

image

尴尬,各位大佬这个白色背景怎么去掉?

换了个svg就行了
image

striving0

striving0 commented on Jan 5, 2021

@striving0

icon颜色不可以修改的看看配置文件的路径有没有合适,常规css中是没有fill属性的,只在XML或者yml-CSS中存在,不用important

heiseyoumo334

heiseyoumo334 commented on Nov 11, 2021

@heiseyoumo334

把svg文件里面的fill去掉 然后选择白色的就可以了

jiefangen

jiefangen commented on May 5, 2022

@jiefangen

删除svg文件里的fill属性可以解决,亲测可用

Szc219

Szc219 commented on Apr 12, 2023

@Szc219

实测有效:
1.删除下载的文件 自带的 fill属性
2.子元素(就是这个svg)设置 fill:颜色 !important
例如:
.Father{
color: red;
}
.github-class{
margin: 0 10px;
/* 删除掉这个文件fill属性。一般情况下这样是没问题的,如果设置不上把下边这行代码设置为行内样式 */
fill: aquamarine !important;
}

SpongeBob-0513

SpongeBob-0513 commented on May 24, 2023

@SpongeBob-0513

我在iconfont下载的icon,设置到左侧导航的图标时,总是比模版中icon的看起来要小一些,我看模版中的icon预览的时候左右两边都没有多余的空白,我下载的在预览的时候左右两边都有空白,是这个原因吗?要怎么解决呢?以下是svg的内容:

替换其他没有空白的图标,我是这样解决的,强迫症大小不统一完全受不了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @yuanyuanyuan@PanJiaChen@baojiawei@BestMafen@fewbadboy

        Issue actions

          图标的颜色怎么修改呀 · Issue #330 · PanJiaChen/vue-element-admin