Changing icon colors

Hello!

I’d like to change the color of the icons in my site: www.necrenovables.com when I the mouse is over them just as you can see here: www.greenglobe.com

Could you help me?

Thank you very much!

Hello there,

Thank you for asking.

In order to achieve that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin?

.service .icon,
.service .fa{
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;  
}

.service:hover .icon{
  border-color: #ff0000;

}

.service:hover .fa{
  color: #ff0000; 
}  

You should adjust the hex color code to meet your need.

Let me know how it works for you.

Warmest regards,
Kharis

Hi Kharid,
I’m looking for a way to invert my service icons. I have used service type a &b as you can see here:


What I want is the icons to invert. That means that the icons should turn white while the circle around it should turn orange and the border should turn white.
Could you help me on that?

Hello @psydrup,

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.roll-icon-list .icon,
.roll-icon-box .icon {
  background-color: rgb(232, 98, 64);
  border-color: #fff;
  color: #fff !important;
}  

.roll-icon-box .icon i{
  color: #fff !important;
}

Regards,
Kharis

Is it possible that there is a difference between Sydney Theme and Sydney Pro? The code from your December 31, 2015 Post worked for me on Sydney, but now it’s not and so isn’t the latest code. Any idea?
Website is http://www.maennerpsychotherapie.de/

Hello there,

The code I suggested at December 31, 2015 should work on the latest version of Sydney Pro as there is no change on the service icons structure. If you apply any custom CSS code, please be sure that the group of CSS code is error free. You can validate it using this toll: https://jigsaw.w3.org/css-validator/#validate_by_input

Regards,
Kharis

Now it works. Thanks!
Do you have any idea how the colour of the text below the icon can change the colour at the same time when the icon colour changes after mouse over?

Hello there,

You can use this code:


.service:hover .content h3,
.service:hover .content h4,
.service:hover .content h5{
  color: #fff000 !important;
}

.service:hover .content span{
  color: #000 !important;
}

Regards,
Kharis

There was a delay between the Icon and the text. I tried to fix it with the code below but it didn’t work.

.service:hover .content h6, 
.service:hover .content h2, 
.service:hover .content h3, 
.service:hover .content h4, 
.service:hover .content h5{
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;  
}
{
  color: #1c1c1c !important; 
} 
 .service:hover .content span{ 
  color: #000 !important; 
} 

Hello there,

Please try this code:


.service .content h6, 
.service .content h2, 
.service .content h3, 
.service .content h4, 
.service .content h5,
.service .content span{
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;  
}

.service:hover .content h6, 
.service:hover .content h2, 
.service:hover .content h3, 
.service:hover .content h4, 
.service:hover .content h5{
  color: #1c1c1c !important; 
} 

.service:hover .content span{ 
  color: #000 !important; 
} 

Regards,
Kharis