Change Icon-color before and hover of icon-box

KarinErni · October 2015

Hi,
although I picked seagreen skin and are very happy, I would like all the icon-boxes to have a different color.
I inserted in CSS

.icon_box .icon_wrapper i { color: #D73865; } /* change icon-box icon-color to pink */
.icon_box:hover .icon_wrapper i { color: #ffffff; background-color:#D73865; }

that brought me half way:
- Icon is now pink on white background :-).
- On hover, Icon turns white on a pink - SQUARE,.... leaving the space outside the Square but inside the icon-circle in the original seagreen-skin color. How could I complete the transformation to achieve a <mycolor> - white combination instead of <skin-color> - white?
Best Regards, K.

Albert · October 2015

Hi,

please send us url to page where you got these items and we'll have a look on it.

KarinErni · October 2015

Hi, this would be http://www.erni-coaching.com/xxxtest

Albert · October 2015

Ok but what exactly you want to do? Remove pink square on hover and replace green background on hover with pink?

KarinErni · October 2015

Icon looks already as desired when in normal state (pink thumb-up, white circle)
On Hover, I want it to "invert", i.e. white thumb-up, pink circle.
Best regards

Albert · October 2015

Ok. So to change these colors, please use below css:

.icon_box:hover .icon_wrapper i { background-color: transparent !important; }
.icon_box:hover .icon_wrapper::before { background-color: #000 !important; }

KarinErni · October 2015

Worked great (except that instead of #000 it was my pink #D73865, but I figured it out). so it runs:
.icon_box:hover .icon_wrapper i { color: #ffffff; background-color:transparent !important; } /* on hover invert to white icon on pink background*/
.icon_box:hover .icon_wrapper::before { background-color: #D73865 !important; }
I love the theme and your support!

Albert · October 2015

Good to hear that

MCitati · June 2017

Hi! I'm dealing with buttons with icons.

Is is possible to change also the icon color when hovering the button?

If yes, what css should I use if the button class = blue-button?

Bryan · June 2017

@MCitati Please send a link to your page and point to what exactly you want to change
thanks

MCitati · June 2017

All the buttons in this page (and others as well):

I'd like to change the icon color from blue to white (as the button's content does) when hovering.

Please, note that I haven't defined the "blue-button" class yet.

Thank you!

Bryan · June 2017

You can try this css

.button-stroke a.button:hover span.button_icon i, .button-stroke a.button.button_theme:hover span.button_icon i {
		color: #fff !important;
}

MCitati · June 2017

Great, it works

Change Icon-color before and hover of icon-box

Comments