How to make Navbar SVG icons white?

Dev
1

Hi. I am using Custom Header Icons component.
wwww

I would like these to be white.

2

It looks like the component uses an element with a class of custom-header-icon-link to contain each icon. If you’re using svg icons, you should be able to target them like this:

.custom-header-icon-link svg {
    stroke: white;
}

Sometimes svgs look like they are made of lines but they’re actually made of filled-in shapes, so you might need to change the stroke: white to fill: white.

1 Like
3

Hi, trying both of those still has them looking like this:
wwww
With the CSS you provided, no change happened.

5

Hmm, I’m not sure what’s going on there! You might double check to make the sure the icons are svgs and not image files. You could also try stroke: white !important; in case there’s some other styling overriding it.

One ‘sanity test’ I like to do with CSS when it doesn’t seem to be doing anything is to add a background-color to the selector.

.custom-header-icon-link svg {
  background-color: pink;
  stroke: white;
}

This way If you don’t see the background color, the problem might be that the selector isn’t targeting the right element. In this case, the browser’s inspector tool is really handy because you can look at the hierachy of elements and get a better idea of how the selector should be written.

With Chrome, you can hit ctrl+shift+c and click on the icon to have it jump to that element in the list. If you want to post a screen shot of the elements tab, we could take a look at how things are organized. For instance, this is what it looks like for me when I try the component in preview:

image

6

I’ll try that when I’m back home. Have tried to get this working for like 8hrs now :upside_down_face: background-color was one of the things I tried earlier and have messed with Inspect Element non-stop but still didn’t work. Will try the “important” thing later when home in a few hours and leave an update! And yes, they’re 100% .SVG links.

7

Ah man, sounds frustrating!

One other technique that can be helpful for troubleshooting is to add styles directly the element in the inspector to see if that works (using the element.style part of the styles tab). Note: these are temporary changes that only affect the current window and are deleted when you refresh.
image

8

Here are my icons and here is the Inspect Element for them:

bbbb
bbbb720×375 20.8 KB

I’ve tried all the CSS coding you listed, both trying “stroke” and “fill.” The “!important” thing didn’t work either. I have no idea what’s causing this.
I might have stumbled upon something, though. I noticed that even though I am using .SVG “images”, the Inspect Element is still showing them in an <img> tag VS the <svg class=" that yours shows. Is this a bug with Custom Header Icons?

9

Aha, yeah looks like that’s why the changes weren’t doing anything–there’s no actual <svg> tag. I don’t think it’s a bug that the component put it in an <img> tag. That’s just one of the ways to display an svg, but it does make it harder to style it. If you have access to the svg files themselves, you can change the stroke or fill color there (it would be an attribute like stroke="black", and there could be more than one).

If you can’t edit the svg, you could try using css filters. These let you add certain visual effects to an element. Since they appear to be black now, we could try inverting them to get white.

.custom-header-icon-link img {
  filter: invert(100%);
}

Note that the selector needs to be img instead of svg now

2 Likes