Jump to content

Adding Whatsapp icon to social links on header and footer of site.

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://geeknproud.com

Hi, I'm new here, just starting my site and I was looking to add the whatsapp link in my social links on the header and footer but it seems it is not possible as it shows a chain icon instead of whatsapp. Any way for me to add the icon? I had found these two images for the icons which matches the theme of my site. One of the images might not be visible as it is a white outline and the forum background makes it disappear but it is there below the black icon.

Can someone help me edit the CSS to include this? I'm using a personal plan and the site is https://geeknproud.com password is 202101

png-clipart-whatsapp-icon-cdr-logo.png

dlf.pt-whatsapp-png-66153.png

Edited by geeknproud
explanation
Link to comment
On 1/25/2021 at 7:38 AM, geeknproud said:

I still need help with this @tuanphan 

Is there something you can suggest, please?

Hi. Sorry for the delay. Just had some days off.

Step 1. Edit Footer > Add a Code Block > paste this code

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 2. Let me know. I will check code to replace link icon to whatsapp

https://fontawesome.com/v4.7.0/icon/whatsapp

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
7 hours ago, tuanphan said:

Hi. Sorry for the delay. Just had some days off.

Step 1. Edit Footer > Add a Code Block > paste this code


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 2. Let me know. I will check code to replace link icon to whatsapp

https://fontawesome.com/v4.7.0/icon/whatsapp

 

Hi @tuanphan thanks for replying. I've added the code block with the code you mentioned. 

Link to comment

Step 2. Add this to Design > Custom CSS

header#header [href*="wa.me"] {
    visibility: hidden;
}
header#header [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
}

image.thumb.png.23a6861aad716febd8092c5e72fa134d.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 2/4/2021 at 7:11 AM, tuanphan said:

Step 2. Add this to Design > Custom CSS


header#header [href*="wa.me"] {
    visibility: hidden;
}
header#header [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
}

image.thumb.png.23a6861aad716febd8092c5e72fa134d.png

That was awesome, sorry to bother you once more, I swear this is the last thing. I tried doing it myself but couldn't figure how to do the same but for the link icon on the footer so that it will show the whatsapp icon there as well.

image.png.58136e06559c3b1f084a41dada151327.png

 

Link to comment

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:

image.png.eef781c31e0fc7d0ea4302ced38cd3db.png

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.

 

Link to comment
  • Solution

Usethiss code

footer.sections [href*="wa.me"] {
    visibility: hidden;
    position: relative;
}
footer.sections [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
On 2/7/2021 at 8:26 AM, tuanphan said:

Usethiss code


footer.sections [href*="wa.me"] {
    visibility: hidden;
    position: relative;
}
footer.sections [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

 

Thank you so much! That worked perfectly. 

You can close this post. That's all I needed.

Link to comment
  • 1 month later...
On 2/2/2021 at 5:39 AM, tuanphan said:

Hi. Sorry for the delay. Just had some days off.

Step 1. Edit Footer > Add a Code Block > paste this code


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 2. Let me know. I will check code to replace link icon to whatsapp

https://fontawesome.com/v4.7.0/icon/whatsapp

 

Hi @geeknproud
a - You pasted this code as a code block in the footer or in the settings > advanced > code injection(footer)?
b - this step worked for the header?

I'm lost on this. It's not working for me :-(

 

Link to comment
19 hours ago, Lianna said:

Hi @geeknproud
a - You pasted this code as a code block in the footer or in the settings > advanced > code injection(footer)?
b - this step worked for the header?

I'm lost on this. It's not working for me :-(

 

Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 9 months later...

Hi I am trying to use this too. My website www.trouwshoot.nl

In the footer you will see the different social icons but Whatsapp is not working.

I am using SP7.0

Added in the Code Injection Header - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

Design Custom CSS - 

footer.sections [href*="wa.me"] {
    visibility: hidden;
    position: relative;
}
footer.sections [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Link to comment
12 hours ago, stefansegers said:

Hi I am trying to use this too. My website www.trouwshoot.nl

In the footer you will see the different social icons but Whatsapp is not working.

I am using SP7.0

Added in the Code Injection Header - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

 

Design Custom CSS - 

footer.sections [href*="wa.me"] {
    visibility: hidden;
    position: relative;
}
footer.sections [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

With 7.0, try this code

footer.Footer [href*="wa.me"] {
    visibility: hidden;
    position: relative
}

footer.Footer [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 11 months later...
On 1/4/2022 at 8:42 PM, tuanphan said:

With 7.0, try this code

footer.Footer [href*="wa.me"] {
    visibility: hidden;
    position: relative
}

footer.Footer [href*="wa.me"]:before {
    visibility: visible;
    content: "\f232";
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

 

hi, 

this code does not work for me. I still see a link icon and not the whatsapp icon. I am using 7.1

 

Thanks!

Link to comment
On 12/6/2022 at 9:55 AM, mjmyers said:

hi, 

this code does not work for me. I still see a link icon and not the whatsapp icon. I am using 7.1

 

Thanks!

With 7.1, try this code

[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%)
}

If the code doesn't work, you need to share link to your site, we can easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 3 weeks later...

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.