I used custom CSS injection to change the icon of a social link in my header. I am trying to now make this custom icon match the colour theme and follow the style settings I have for my header. I have attached screenshots so you can see what is going on and the following code is the code I have used for adding a custom icon for a social link in my header:
@media only screen and (min-width:640px) {
.header-actions-action--social .icon--fill:nth-of-type(2) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/646c19ab135dd855c8022b8a/t/6578d70b2daae851a3f880a9/1702418187251/clouds_6563658.png);
background-size: 100%;
background-repeat: no-repeat;
}
}
.header-menu-actions-action:nth-of-type(2) {
svg {
display:none;
}
background-image: url(https://static1.squarespace.com/static/646c19ab135dd855c8022b8a/t/6578d29bd0e5a30c450a750d/1702417051923/clouds_6563658.png);
background-size: 100%;
background-repeat: no-repeat;
}
Thank you in advance for anyone able to help!
