geeknproud

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.

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:

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.

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

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.

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. 

I still need help with this @tuanphan 

Is there something you can suggest, please?

Quote

12 hours ago, tuanphan said:

Hi. Your site is private. can you setup password & share url? We can check code easier

 

I have change it to public right now as it is pretty much ready. All I'm missing is the whatsapp icon in my social link. I currently show the link icon.

Quote

4 hours ago, tuanphan said:

Just solved same case a few days ago.

Do you use Business or Commerce Plan?

 

Neither, I'm using a personal plan

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