Change color of social media icons when hover, a diferent color for each icon

Store Design
, ,
1

Hello,

I need to change the color of social media icons when hover, but I would like a diferent color for each icon.

My URL is: https://porsche-rj-8273.myshopify.com/

I am using Dawn theme. Current design, the icons dont change color when hover.

Regards,

Eytan

2

Hi,

Add a class to each svg icon you’ve added for example “icon-facebook” “icon-whatsapp” “icon-instagram”

Then as it looks on your svg you’re not using “currentColor” fill so the below code at the bottom in component-list-social.css should work if you add the classes.

.list-social__link:hover .icon-instagram g {
fill: magenta;
}

.list-social__link:hover .icon-facebook g {
fill: green;
}

.list-social__link:hover .icon-whatsapp g {
fill: blue;
}

Hope it helps or gets you somewhere :slightly_smiling_face:

3

Hello,

added the code but unfortunately did not work. Still always black.

Screen Shot 2023-05-23 at 16.41.13.png
Screen Shot 2023-05-23 at 16.41.13.png860Ă—938 86.3 KB

4

I am new here… So, I was wondering about “Add a class to each svg icon you’ve added for example “icon-facebook” “icon-whatsapp” “icon-instagram””

Not sure what does it means…

Regards,

Eytan

5

Found out how to include the Class.

Solved. Thanks !

6

Brilliant. Sorry for not being clear but happy it helped.

If anyone else dives into this thread below is what I mean by adding the class in the opening tag of your .svg code if you want to target them individually.