Social Link Custom Icon doesn't match the other social links icon

Hello!

I added a custom IMDb icon to my social links. There are a couple of issues and since I haven't found a solution I'm writing here:

1. The custom icon appears only on the footer, but not on the header.

2. How can I make the icon the same as the other icons style, size, colors and hover effects on footer and header?

3. On the about page there are custom colors added. so I need to change the color of the custom icon as well.

4. I need it for desktop and mobile view as well.

www.mvarbanova.com

Pass: purplebutterfly

Thank you!

The classes for the social icons in the header are different from the social icon block, try this class:

.header-actions-action. header-actions-action--social

@Ziggy  Thank you so much for the response! Unfortunately the system says there is an error with this code

18 minutes ago, kkf_magi said:

Unfortunately the system says there is an error with this code

An error, how did you apply the class I shared?

5 minutes ago, Ziggy said:

An error, how did you apply the class I shared?

Certainly I have applied it wrong since I don't understand anything about coding. I added it to CSS and then pasted the other information for the image (like in the footer)

Can you share the code you are using so I can write the CSS to apply your icon to the header on desktop and mobile?

@Ziggy  Sure:

.sqs-svg-icon--list a:nth-of-type(1) {
  svg {      
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/6646f8c9636d2a1604eebf48/t/6666c0705f393a5f7ecef737/1718009968980/IMDB+Raspberry.png);   
  background-size: 100%;   
  background-repeat: no-repeat;   
}

@Ziggy Thank you SO much! Is there a way to add a hover effect like the other icons and a frame (like in the footer)?

UPDATE:  On the About Page, the icon colors and hover effect are different

1 hour ago, kkf_magi said:

@Ziggy Thank you SO much!

Can you mark my post as the solution and give it a like?

1 hour ago, kkf_magi said:

Is there a way to add a hover effect

The hover effect changes the colour of the SVG to a pale pink, given that you are using an image, you can't simply change the hover in CSS, you would need a different image file uploaded that could replace the first one when hovering.

@Ziggy Thank you so much for your help, Ziggy!