#1. First, use this code to Code Injection – Header (or Page Header Code Injection or Code Block [if your plan doesn’t support Code Injection/Page Header])
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
#2. Next, add Text/URL, for example, if you want to add Facebook, Instagram, and Youtube Icons, then add 3 texts: Facebook, Instagram, and Youtube, then hyperlink them and add the corresponding URL.
#3. Use this code to Custom CSS box
#3.1. With Facebook Icon
/* Facebook Icon */
li.list-item p a[href*="facebook"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="facebook"]:before {
content: "\f09a";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.2. With Instagram Icon
/* Instagram Icon */
li.list-item p a[href*="instagram"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="instagram"]:before {
content: "\f16d";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.3. With Youtube Icon
/* Youtube */
li.list-item p a[href*="youtube"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="youtube"]:before {
content: "\f167";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.4. With Tiktok icon
/* Tiktok */
li.list-item p a[href*="tiktok"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="tiktok"]:before {
content: "\e07b";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.5. With Messenger Icon
/* Messenger Icon */
li.list-item p a[href*="messenger"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="messenger"]:before {
content: "\f39f";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.6. With Twitter Icon
/* Twitter */
li.list-item p a[href*="twitter"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="twitter"]:before {
content: "\f099";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.7. With Linkedin Icon
/* Linkedin Icon */
li.list-item p a[href*="linkedin"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="linkedin"]:before {
content: "\f08c";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.8. With Whatsapp Icon
/* Whatsapp Icon */
li.list-item p a[href*="whatsapp"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="whatsapp"]:before {
content: "\f232";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.9. With Amazon Icon
/* Amazon Icon */
li.list-item p a[href*="amazon"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="amazon"]:before {
content: "\f270";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.10. With Ebay Icon
/* Ebay Icon */
li.list-item p a[href*="ebay"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="ebay"]:before {
content: "\f4f4";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.11. With Line Icon
/* Line Icon */
li.list-item p a[href*="line"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="line"]:before {
content: "\f3c0";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.12. With Apple Icon
/* Apple Icon */
li.list-item p a[href*="apple"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="apple"]:before {
content: "\f179";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.13. With Microsoft Icon
/* Microsoft Icon */
li.list-item p a[href*="microsoft"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="microsoft"]:before {
content: "\f3ca";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.13. With Google Icon
/* Google Icon */
li.list-item p a[href*="google"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="google"]:before {
content: "\f1a0";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.14. With Google Play Icon
/* Google Play Icon */
li.list-item p a[href*="play"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="play"]:before {
content: "\f3ab";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.15. With App Store Icon
/* App Store Icon */
li.list-item p a[href*="store"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="store"]:before {
content: "\f36f";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.16. With Google Drive Icon
/* Google Drive Icon */
li.list-item p a[href*="drive"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="drive"]:before {
content: "\f3aa";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
#3.17. With Google Pay Icon
/* Google Pay Icon */
li.list-item p a[href*="pay"] {
font-size: 0;
text-decoration: none !important;
}
li.list-item p a[href*="pay"]:before {
content: "\e079";
font-family: "Font Awesome 6 Brands";
color: #000;
font-size: 20px;
}
