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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 w

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:

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-vp86vTRFVJgpjF9jiIGPEEqYq

Posted Images

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.

Link to post
  • 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

Link to post
  • 0

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.

Link to post
  • 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
Link to post
  • 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

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...