Whatsapp Icon on Header and Footer

Site URL: https://www.libeluladesol.cl

Hi everyone!

I'm looking for a way to add mi Whatsapp number on Social links (header and footer). I've already tried a solution: 

but didn't work for me.

Right now I've added a link icon with the whatsapp contact and standard message. You can see it in the header and the footer:

Header: 

Footer: 

Can anyone help me with the coding?

My website is www.libeluladesol.cl

Have you published your site already? 

I am building a new site following the same instructions you mentioned, and having the same problem as you are having. But I haven't published the site yet. Wonder if that can be related.

Yes it's published

Is this on your footer code-block ? 

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

Nop, I put it in Inyection Code on footer when I was trying to do the solution indicated for geeknproud  post. But didn't work so I deleted it.

Hello! I'm having the same issue. I tried following the steps on @geeknproud's post, but it also didn't work. I'd appreciate if someone could lend me a hand with the CSS code for my site. 

The website is https://www.megatiendaec.com/ and password is megatienda2020

@LykaStudio

Building off of @tuanphan' s code, try the following.

#header [href*="wa.link"] {

  visibility : hidden;
  
  }

#header [href*="wa.link"]:before {

  content : '\f232';
  font-family : FontAwesome;
  visibility : visible;
  
  }

This is for v7.1.

The main difference here is that we need to use wa.link instead of wa.me. Different links, differennt selectors.

Let us know how it goes.

Thank you so much @creedon! It worked like a charm! How did you know which selector to use? I need to add a tik tok icon to another page too.

Only one more thing, I also have the social icons on my footer. The icons are inside a circle, but the whatsapp icon didn't seem to pick up on the same style. It is just plain white. Can you help me please? I'll attach an image so you see what I mean, 

On 3/20/2021 at 7:53 AM, LykaStudio said:

How did you know which selector to use?

I really just followed tuanphan's code and substituted the part of your WhatsApp URL that was appropriate.

Quote

The icons are inside a circle, but the whatsapp icon didn't seem to pick up on the same style.

Yeah that is a tricky one. In the header you are swapping in a font.

The footer is using SVG (scaleable vector graphics) and two versions of each icon image to achieve the effect there.

The first challenge would be obtaining the WhatsApp icon in two formats. Here is an example of the Facebook f in it's two versions. The second image is a mask.

The second part of the challenge shouldn't be too hard. Use Javascript to swap in the two SVGs in place of the generic social icon SS uses. This would require the business plan or above.

On 3/20/2021 at 9:53 PM, LykaStudio said:

Thank you so much @creedon! It worked like a charm! How did you know which selector to use? I need to add a tik tok icon to another page too.

Only one more thing, I also have the social icons on my footer. The icons are inside a circle, but the whatsapp icon didn't seem to pick up on the same style. It is just plain white. Can you help me please? I'll attach an image so you see what I mean, 

Hi. Do you still need help?

@creedon thank you so much for your help, but I don't know even a little bit of Javascript. @tuanphan if you are able to I'd be very grateful! 

It didn't work for me either :-(
Does it have to do with the site version? 

On 3/23/2021 at 8:24 AM, LykaStudio said:

@creedon thank you so much for your help, but I don't know even a little bit of Javascript. @tuanphan if you are able to I'd be very grateful! 

On 3/23/2021 at 9:17 PM, Lianna said:

It didn't work for me either :-(
Does it have to do with the site version? 

Hi. Try this my guide.

Appears to be WhatsApp is touchy to the size of search engine optimization image used. I played around with the size of the photograph record and it now suggests up as a preview/thumbnail when sharing.