Can I add a custom icon image for the social link icon on the footer?

I've made the header social link icon invisible, but I've made it visible on the footer social link. I wanted to add Whats App as a social link, but the icon shows up as a link icon, not as an Instagram icon as a social link. Is there any way I can customize the icon as a What's App icon, where it currently looks like a link? 

Here is how my footer looks now when I added a what's app social link. I want to make the link icon as customized What's app icon. 

Can you share your website URL and the whatsapp link URL?

You would need code like this and an icon image for Whatsapp:

.social-icons-color-standard .url[href="***URL***"] svg {
  visibility:hidden;
}
.social-icons-color-standard .url {
  border-color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}
.social-icons-color-standard .url[href="***URL***"] {
  background-image: url('***UPLOADED IMAGE URL***');
  background-size: cover;
  background-repeat: no-repeat;
  transform:scale(1);
}

But the exact code depends on the social block settings, and adding the links and image URL.

1 hour ago, Ziggy said:

Can you share your website URL and the whatsapp link URL?

You would need code like this and an icon image for Whatsapp:

.social-icons-color-standard .url[href="***URL***"] svg {
  visibility:hidden;
}
.social-icons-color-standard .url {
  border-color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}
.social-icons-color-standard .url[href="***URL***"] {
  background-image: url('***UPLOADED IMAGE URL***');
  background-size: cover;
  background-repeat: no-repeat;
  transform:scale(1);
}

But the exact code depends on the social block settings, and adding the links and image URL.

Thank you for your reply! @Ziggy

The website URL is https://www.vinaliehk.com/
and Whatsapp link is https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0
So should I apply this code to the code injection page?

@Ziggy I pasted this code to CSS but it still shows as same.

Website:https://www.vinaliehk.com/

Whatsapp link:https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0

.social-icons-color-standard .url[href="https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0"] svg {
  visibility:hidden;
}
.social-icons-color-standard .url {
  border-color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}
.social-icons-color-standard .url[href="https://api.whatsapp.com/message/TJOJYPO7OSXAM1?autoload=1&app_absent=0"] {
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOhu6mGbCCIiIeZD_wMWVc0BFqh5Lp0QlNVvMcQ1KLJQ&s');
  background-size: cover;
  background-repeat: no-repeat;
  transform:scale(1);
}

@Chloe9656 I don't see Link icon on Footer now. Can you check it again?