Buy me a coffee

List Simple: Add Social Icons

To add Social Icons to List Simple, you can follow these.
#1. First, add some Social Links to Item Description, like this.

List Simple Add Social Icons 1 Min

List Simple Add Social Icons 2 Min

We will have

1ac891e95178e826b169 Min

#2. Use this code to Code Injection Header (if your site doesn’t support Injection, you can add it via Code Block in SIte Footer)

<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" />

List Simple Add Social Icons 3 Min

#3. Use this code to Custom CSS box

/* Facebook */
li.list-item p a[href*="facebook.com"] {
    font-size: 0;
    text-decoration: none;
}
li.list-item p a[href*="facebook.com"]:before {
    content: "\f09a";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
}
/* Instagram */
li.list-item p a[href*="instagram.com"] {
    font-size: 0;
    text-decoration: none;
}
li.list-item p a[href*="instagram.com"]:before {
    content: "\f16d";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
}
/* Pinterest */
li.list-item p a[href*="pinterest.com"] {
    font-size: 0;
    text-decoration: none;
}
li.list-item p a[href*="pinterest.com"]:before {
    content: "\f0d2";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
}
/* Linkdedin */
li.list-item p a[href*="linkedin.com"] {
    font-size: 0;
    text-decoration: none;
}
li.list-item p a[href*="linkedin.com"]:before {
    content: "\f08c";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
}
/* Youtube */
li.list-item p a[href*="youtube.com"] {
    font-size: 0;
    text-decoration: none;
}
li.list-item p a[href*="youtube.com"]:before {
    content: "\f167";
    font-family: "Font Awesome 6 Brands";
    font-weight: bold;
    font-size: 16px;
}

List Simple Add Social Icons 4 Min

Result

List Simple Add Social Icons 5 Min

#4. To make icons same line, you will need to adjust #1 a bit. We will place all links same line. Like this

List Simple Add Social Icons 6 Min

Result

List Simple Add Social Icons 7 Min

You can use this extra CSS code to add space

li.list-item a[href*="facebook"], li.list-item a[href*="instagram"], li.list-item a[href*="pinterest"], li.list-item a[href*="linkedin"], li.list-item a[href*="youtube"] {
    margin-left: 5px;
    margin-right: 5px;
}

List Simple Add Social Icons 8 Min

Result

List Simple Add Social Icons 9 Min