Announcement Bar: Icon

Read First

First, you need to add this code to Code Injection > Header

(If you use Personal Plan, you can add via Code Block in Site Footer)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">

Email Icon

First, highlight email text > Click Link Icon

You can use this mailto: format

Next, use this code to Custom CSS box

div#announcement-bar-text-inner-id a[href*="mailto"]:before {
    content: "\f0e0";
    font-family: "Font Awesome 5 Free";
    color: white;
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
}

Result

Phone Icon

Highlight Phone text/number > Add Link > Use this format

Then use this code to Custom CSS box

div#announcement-bar-text-inner-id a[href*="tel"]:before {
    content: "\f095";
    font-family: "Font Awesome 5 Free";
    color: white;
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
}

Address Icon

Highlight text > Add the link

then use this code to Custom CSS box

div#announcement-bar-text-inner-id a[href*="address"]:before {
    content: "\f279";
    font-family: "Font Awesome 5 Free";
    color: white;
    font-weight: bold;
    margin-right: 5px;
    display: inline-block;
}
a[href*="#address"] {
    border: none !important;
    text-decoration: none !important;
    pointer-events: none;
}

Remove Underline

Use this CSS code

div#announcement-bar-text-inner-id a {
    text-decoration: none !important;
}

Facebook Icon

Add text: FA, then add Facebook URL then use CSS code

div#announcement-bar-text-inner-id a[href*="facebook"] {
    font-size: 0;
}
div#announcement-bar-text-inner-id a[href*="facebook"]:before {
    font-size: 18px;
    content: "\f09a";
    font-family: "Font Awesome 5 Brands"
}

Reference: https://fontawesome.com/search?q=facebook&o=r

Instagram Icon

Add text: IN then add Instagram URL, then use CSS code

div#announcement-bar-text-inner-id a[href*="instagram"] {
    font-size: 0;
}
div#announcement-bar-text-inner-id a[href*="instagram"]:before {
    font-size: 18px;
    content: "\f16d";
    font-family: "Font Awesome 5 Brands"
}

Reference: https://fontawesome.com/search?q=instagram&o=r&m=free

LinkedIn icon

Add LI text then add LinkedIn url then use CSS code

div#announcement-bar-text-inner-id a[href*="linkedin"] {
    font-size: 0;
}
div#announcement-bar-text-inner-id a[href*="linkedin"]:before {
    font-size: 18px;
    content: "\f08c";
    font-family: "Font Awesome 5 Brands"
}

Reference: https://fontawesome.com/search?q=linkedin&o=r&m=free

Note: All icons are Font Awesome version 5