WhatsApp Social Link

Site URL: http://www.cleaverforge.co.uk

Hi,

this is my first post here. I have absolutely no knowledge of coding or anything technical!

I would like to add a link to WhatsApp in my Social links, my website is still under construction and the password is Roomoo. 
 

99% if my visitors will be using mobile to access my site so I am setting up the link so it opens a chat in WhatsApp. When I add the link a paper clip icon appears. I have found a couple of threads about this, recommending code injections and custom CSS. I have tried these approaches with no success.

Could I kindly ask for an idiots guide to changing my paper clip into a WhatsApp icon please?

Many thanks in advance 

Hi,

First, add this to Settings > Advanced > Code Injection > Header

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

Next, let me know, we will check some code to add FontAwesome Whatsapp icon to your header site.

Thank you @tuanphanI have added that code into code injection > header 
 

I did find a video on how to change the social icon but it only worked for the footer . I already have some code in my header that I am using for a product rating plug-in so I have just left a line in between the codes. I hope this is right and look forward to the next step.

thank you for your help already!

On 9/15/2021 at 1:06 PM, CleaverForgeUK said:

Thank you @tuanphanI have added that code into code injection > header 
 

I did find a video on how to change the social icon but it only worked for the footer . I already have some code in my header that I am using for a product rating plug-in so I have just left a line in between the codes. I hope this is right and look forward to the next step.

 

thank you for your help already!

Next, add this to Design > Custom CSS

/* header whatsapp icon */
header#header [href*="wa.me"] svg {
    display: none;
}
header#header [href*="wa.me"]:before {
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
    font-weight: bold;
    color: black;
}

@tuanphan that’s been done too!

thank you kindly for your help!

is there a way to increase the font size a tiny bit as it is ever so slightly smaller than my other social icons?

On 9/16/2021 at 5:20 PM, CleaverForgeUK said:

@tuanphan that’s been done too!

thank you kindly for your help!

 

is there a way to increase the font size a tiny bit as it is ever so slightly smaller than my other social icons?

add font-size to this code

header#header [href*="wa.me"]:before {
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
    font-weight: bold;
    color: black;
	font-size: 30px;
}

@tuanphan 

thank you again, you’ve been a great help!