Whatsapp Icon

Header Whatsapp Icon

First, you need to add Whatsapp Url to Header Social Icons

Whatsapp 1 Min

Next, enter your Whatsapp URL, it will show a Generic Link Icon

Whatsapp 2 Min

Use this below code to Code Injection Header

(If you use Personal Plan, you can add a Code Block on Site Footer then add the code)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<style>
header#header [href*="wa.me"] svg, header#header [href*="whatsapp"] svg {
    display: none;
}
header#header [href*="wa.me"]:before, header#header [href*="whatsapp"]:before {
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
    font-weight: bold;
    font-size: 20px;
    position: relative;
    top: 2px;
}
</style>

Whatsapp 2 Min

Result

Whatsapp 3 Min

Social Links Block Whatsapp Icon

First, you need to enter Whatsapp URL to Social Links Block, it will show Generic Link Icon

Whatsapp 4 Min

Use this code to Code Injection Header (If you use Personal Plan, you can add a Code Block to Site Footer then paste same code).

And the fullcode for both Social Links Block & Header Icon is

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<style>
header#header [href*="wa.me"] svg, header#header [href*="whatsapp"] svg {
    display: none;
}
header#header [href*="wa.me"]:before, header#header [href*="whatsapp"]:before {
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
    font-weight: bold;
    font-size: 20px;
    position: relative;
    top: 2px;
}
</style>
<style>
.socialaccountlinks-v2-block [href*="wa.me"] svg, .socialaccountlinks-v2-block [href*="whatsapp"] svg {
    display: none;
}
.socialaccountlinks-v2-block [href*="wa.me"]:before,.socialaccountlinks-v2-block [href*="whatsapp"]:before {
    content: "\f232";
    font-family: "Font Awesome 5 Brands";
    font-weight: bold;
    font-size: 20px;
    position: relative;
    top: -7px;
}
</style>

Whatsapp 5 Min

Result

Whatsapp 6 Min

Change Whatsapp Icon Color on One Page

Use this code to Page Header Code Injection or Code Block (edit page > add Code Block)

<style>
.socialaccountlinks-v2-block [href*="wa.me"]:before,.socialaccountlinks-v2-block [href*="whatsapp"]:before, header#header [href*="wa.me"]:before, header#header [href*="whatsapp"]:before {
    color: #f1f;
}
</style>

Whatsapp 7 Min

Result

Whatsapp 8 Min