Hi!

We've got four social links on our website - http://www.crafnanthouse.com

Using custom code the first three change colour to yellow when you hover over them. We have just added further code to change the WhatsApp icon to the correct one (it was the chain icon before), but the WhatsApp logo is permanently yellow.

This is the current code we have to do all of that:

[href*="wa.me"] {
    visibility: hidden;
    position: relative;
}
[href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 35px; /* Adjust the size as needed */
}
.sqs-block-button-element:hover {
 text-decoration: none !important;
}
.image-button a:hover {
 text-decoration: none !important;
}
.sqs-svg-icon--wrapper:hover .sqs-use--icon {fill: hsl(51, 100%, 42%)!important;}

Could anyone advise on what to change so all the icons change to yellow when hovering? Thanks!!!!

Hi,

Add this CSS below the existing one

.sqs-svg-icon--wrapper::before {
    color : #fff;
}

.sqs-svg-icon--wrapper:hover::before {
    color : #d6b600;
}

Hi! Just tried that - it almost works (thanks!). The only thing is the WhatsApp logo stays white all the time when you hover over the others, rather than light grey. Is there a way to get them all to do the same thing?

Amazing!!! Thats worked 🙂 Thank you SO MUCH!!!

😀👍