Jump to content

Adding a custom icon (phone/ email) before text

Recommended Posts

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.

 

 

Link to comment

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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

image.thumb.png.982fee3c929d1aef9968504c0a5d5255.png

Reference

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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"

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 10 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.