List Section Social Icons

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