Adding a custom icon (phone/ email) before text

Site URL: https://www.fueldigitalmarketing.ca/contact

Instead of writing the words phone or email I would like to add a phone and email icon. I don't want to use unicodes because they don't show up the same on all devices. I have heard of fontawesome or icon 8. There are lots of tips to add icons to a navigation bar but don't see anything for body content.

Here is my site contact page: https://www.fueldigitalmarketing.ca/contact

Thank you.

Step 1. Add this code to Code Injection > header

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Step 2. Let me know when you inserted, we can check code to add email/phone icons.

Thank you for your help. Code has been updated.

Hi. I inserted the code provided above. Is there another step to follow? Your help is appreciated.

On 1/19/2021 at 9:26 PM, michael2019 said:

Hi. I inserted the code provided above. Is there another step to follow? Your help is appreciated.

Add to Design > Custom CSS

div#block-f4ffb10b444f9c603fa1 p:nth-child(4):before {
    content: "\f095";
    font-family: FontAwesome;
    padding-right: 5px;
}
div#block-f4ffb10b444f9c603fa1 p:nth-child(5):before {
    content: "\f0e0";
    font-family: 'FontAwesome';
    padding-right: 5px;
}

Reference

• https://fontawesome.com/v4.7.0/icon/envelope
• https://fontawesome.com/v4.7.0/icon/phone

Thank you so much it worked.

I checked FontAwesome's website and noticed they now on version 5. Do you know if there is there an updated code I can use to put in Code Injection > header? 

The code above is for 4.7.0.

They have released version 6. I like using ver 4.7.

FA 5.

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

FA5 - 4 use different syntax for icons. You can find ver 5. phone & email icons syntax here. https://fontawesome.com/icons

with font-family, FA5 use "Font Awesome 5 Free" or "Font Awesome 5 Brand" or "Font Awesome 5 Brands" or "Font Awesome 5 Pro"

Thanks. Is there a reason you like ver 4.7 over ver5 or 6?

On 1/21/2021 at 2:10 AM, michael2019 said:

Thanks. Is there a reason you like ver 4.7 over ver5 or 6?

FA5 has put some free icons in FA4 into paid icons

Hey!

I made a guide on how to add over 1600 icons to Squarespace, including a lot of different customization options.

You can check out my free icon guide here.