I managed to figure it out, well kinda, still need some help.
After try some stuff with the code I found what I needed to target and came up with this:
footer#footer-sections [href*="wa.me"] {
visibility: hidden;
}
footer#footer-sections
[href*="wa.me"]:before {
visibility: visible;
content: "\f232";
font-family: FontAwesome;
}
However when doing this, for some weird reason the icon end up misaligned:
tried a few other CSS options to try and bring it to alignment but I just couldn't. Not sure what I might be missing.