[Resolved] Getting SVG icons to change from white to black on hover

[CRAIG]

I have some icons in the header of my homepage which are contained within buttons

When hovering over the button, the button background turns white

>>>> On hover, I would like the icon to transform from a white outlined icon to a black outlined icon <<<<

Could you please suggest the best way to achieve this?

I tried the fix suggested on another article, but it didn’t quite do what I needed it to, although it appeared to be on the right tracks

https://generatepress.com/forums/topic/change-colour-of-buttons-custom-svg-icon-on-hover/#post-1775778

I have shared the homepage link privately

Thanks

Craig

[David]

Hi there,

GBs icons only support SVG Fill colors at this time, and the <path> elements within the SVG have to include a fill attribute.

As your icons are all strokes – and not fills, this won’t apply. In addition to this your paths are being styled by an inline style sheet using the .cls-1 selector.

So you could add some CSS like this to change the stroke of an icon when hovering over a button:

.gb-button:hover svg .cls-1 {
    stroke: #000;
}

[CRAIG]

Added the CSS to the page as suggested, using simple CSS. Worked perfectly.

You’re just showing off David!

[David]

Lol 🙂

Glad to be of help !

[CRAIG]

Can we revive this?

I seem to have broken this somehow.

The following CSS is still in place, but now the icons disappear when I hover over the buttons.

.gb-button:hover svg .cls-1 {
stroke: #000;
}

[Elvin]

Hi there,

I’ve checked the site and I see it being added but there seems to be a syntax error before the CSS.

This CSS – https://share.getcloudapp.com/12uAXQg8 – is missing a delimiter }

a.read-more { display: block; margin-top: 1em; should have a } after margin-top: 1em;

[CRAIG]

Thanks very much for your help. I should be more careful

[Elvin]

No problem. 🙂

[Author]

Posts