Icon box hover color

[Brentnauer]

Hi there,

How would I change the icon hover color for an icon box?

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.sf-icon-box-standard .sf-icon-cont:hover {
  color: #999999;
}

– Kyle

[Brentnauer]

Hi there,

This doesn’t appear to be working for me.

What I’m trying to do is override the “hover” color for icons in the icon box page builder elements. Using Firefox’s inspector, the color appears to be done inline and changes using JavaScript when your mouse is anywhere on the icon box, not just the icon:

<div class=”sf-icon-box sf-icon-box-standard sf-animation sf-icon- sf-animate” data-animation=”none” data-delay=”0″ style=”background-color:#52433d;”>

I need to change hover color individually per icon box.

Thanks.

[Kyle – SUPPORT]

Please could I see your link?

– Kyle

[Brentnauer]

This reply has been marked as private.

[Kyle – SUPPORT]

You would need to add an extra class to the icon boxes with a light background then add this:

.your-class .sf-hover .sf-icon-cont, .sf-hover .sf-icon-box-hr {
  background-color: #52433d!important;
}

– Kyle

[Brentnauer]

Thank you, this worked.

[Swift Ideas – Ed]

Cheers Kyle, will close this.

– Ed