Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

WhatsApp Social Link


CleaverForgeUK

Question

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 

Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 1

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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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!

E8163B52-8A1C-47F9-8D89-59BD663EADB2.jpeg

Link to comment
  • 0
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!

E8163B52-8A1C-47F9-8D89-59BD663EADB2.jpeg

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...