SOLVED: SVG icon color not working when linking

Bugs
1

Bricks Version: 1.5
Browser: Edge 90
OS: Windows
URL: https://ny.creatiw.dk

I have a facebook icon (SVG) where i’ve changed the color with the color picker. all looks good, but when I set a link on the icon, it removed the color chosen.

i can see in devtool that it sets fill to #000000
image

Small video of the process

https://wwwplakato-my.sharepoint.com/:v:/g/personal/hej_plakato_dk/EbltZ4R1nChLlI-x6p3XwyYBcEYbAcx1HbWjzkh_5PDEGg?e=wfsdiO

nb: works with non svg icon…

2

Hi Martin,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker.

You can solve this temporarily by using custom CSS:

root svg {
  fill: red;
}

Best regards,
timmse

1 Like
3

Hi @creatiwdk,
We’ve fixed this bug in Bricks 1.5.1 RC, which is now available as a manual download in your account.

Please let us know if you are still experiencing issues.

Best regards,
timmse

4

Is this the same issue that I have?

Fontawsome icon color incorrect.

bricks-01
bricks-011193×671 33.5 KB

5

No, it isn’t. However, changing the color of the icon list icons works fine for me :thinking:
Does it show on the frontend? Can you provide me with a live link?

7

I have the same issue: with ACSS if a link is added to the icons then they take the default color of the link even if the icon color has been changed

If ACSS is turned off then the icon colour displays correctly

image
image1997×797 118 KB

8

Hi Jaime,
Your issue is not the same at all since you’re not using SVGs but icon fonts. We may need to make our selector a little more specific so that the ACSS body a rule doesn’t take effect, which it does at the moment. Or you can help yourself with a line of custom CSS:

.brxe-social-icons li.has-link a, .brxe-social-icons li.no-link {
  color: pink;
}
1 Like
9

Yeah that makes total sense! I just wondered at first if this could be some bug/incompatibility that is why I threw it here maybe someone else would come across the same issue :slight_smile:
Thanks Timmse!

10

Not sure if this was fixed, but I’m still experiencing the bug :thinking:

11

Coloring SVGs was a problem for me in Bricks, too…

I personally resorted to CSS Filter generator for a quick fix:

(You can just search “css filter color generator”)…

Sometimes if a SVG has its color embedded into the file, it’s very hard to change its color… (growing pains of SVG :joy: )

12

Hey @aLeighLikeMe,
What exactly is the problem and how can I reproduce it? The thread is very old, and several problems have been mixed up again… so I don’t know precisely what you are referring to :v:

13

I’m using ACSS and Bricks. When using the “Icon list” widget:

  1. The colour of the icon inside the list can be changed successfully UNLESS:
  2. You add a “link”. I used “External Link” with a “#” value and the colour of the icon defaulted to my ACSS “action” colour and could not be changed using the icon colour picker or the typography colour picker or even direct CSS on the element using “%root%”.
  3. The only way you can change the colour with the above settings is if you target the brxe class of the element or the “a” and “li” classes directly in the CSS panel on the element.
14

It’s basically the same problem as here: the ACSS `body a’ style overrides the icon list styles, since we don’t target the a’s specifically.

As I said, in theory, we could make the selector more specific, but we first have to check whether this doesn’t lead to other problems. I will create an improvement task for this, but I will leave this thread as solved, as the original problem was already fixed a long time ago without any relation to ACSS.

15

Thank you - wasn’t sure if it was fully ACSS or not :+1:

16

Hey Leigh,

We’ve changed some selectors of the icon list element in Bricks 1.9.9 beta, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any beta release, please do not use it on a production/live website. It is only meant for testing in a local or staging environment.

1 Like