Change colour of services icon dark grey background

Hi Roman and friends

I have managed to change the colour of the services icon with -

.svg-container.service-icon-svg {
       fill: #d22d4d;   
}

But I am unable to change the dark grey colour when the icon is hovered over.

Can you help please?

Many thanks

Bibs

Hello Bibs,

Sure, but can you please first provide a link to your website?

Kind Regards, Roman.

Hey Roman

Working on a test site on my localhost so can’t send you a link but have uploaded a screenshot. The icon changes to dark grey when you hover over it.

Many thanks

Bibs

Hello Bibs,

You can try to use the following CSS code.

You can add CSS code in Dashboard → Appearance → Customize → Additional CSS.

.service-area .service:hover .svg-container.service-icon-svg svg {
    fill: red;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Ah that’s great, thanks so much. :slight_smile:

By the way is it also possible to change the background hover colour for the Facts section and the social media menu icons section? And just noticed the same for the social media icons that are within Employees. These also change to dark grey on hover.

Would you like me to create a new topic for this?

Thanks as always

Bibs

Hello Bibs, try this CSS code instead of previous:

.service-area .service:hover .svg-container.service-icon-svg svg,
.employee-area .employee-svg:hover svg {
    fill: red;
}

.facts-area .fact:hover,
.widget_fp_social .social-menu-widget li:hover,
.widget .project-filter li:hover {
    background-color: red;	
    border-color: red;
}

Kind Regards, Roman.

Thanks Roman that looks really great!! yay :slight_smile:

Bibs

You are welcome Bibs! :slight_smile:

Kind Regards, Roman.