Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding a custom icon (phone/ email) before text


michael2019

Question

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

8 answers to this question

Recommended Posts

  • 0

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.

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
  • 0
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.

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

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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.

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

Create an account or sign in to comment

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

×
×
  • Create New...