Embed Font Awesome Icons to Divi

Last modified Sep 10, 2020
Difficulty Intermediate
Language CSS, HTML, JavaScript
Category

Watch Tutorial

Font Awesome Website
WP and Divi Icons

Video transcription:

Hey everybody, David here from Divi Space. Today I’m gonna show you two ways to add font awesome to your Divi Website. The Font Awesome icon set is very popular and easy to use, so let’s dive in!

The first way to integrate Font Awesome’s CDN into Divi is to embed the code into Divi’s header. If you haven’t already done so, pause this video now, follow the link in the description, and head over to create a new Font Awesome account. In the Start Page, first, create a project by typing the name and clicking create.

Click the blue Copy Kit code button so you can paste it into Divi.

In your WordPress dashboard, navigate to Divi and Theme Options and select the Integration tab. Make sure the header code is enabled and paste the code. That’s it! Now Font Awesome is enabled and ready to use as an HTML code. Now I will show you how to use it in the text module.

Let’s find the right icon, maybe a rocket. Okay, here it is. I’m going to copy the code and paste it into the text module. Here is the rocket!

Easy, right? You can also stylize the icon with additional css. Because they’re simply fonts, you are able to style them as fonts. I’ll add a custom css class ds-blue-icon. I can make it bigger with font-size property
And make it blue, and I’ll also add a 1px border and some padding. Now I want to add rounded borders, maybe 10px. You can even add a custom background.

Awesome, right?! The second way to install Font Awesome to your site is to use the wp and divi icons plugin where you’ll have more than 2500 icons at your disposal. This is one of my favourite Divi plugins, because you can create really unique designs  AND it has a keyword-based search function. WP and Divi Icons Pro is available as a standalone purchase but it’s also included in the Divi Space Annual Membership and Lifetime Membership.
There is also a free version available, check out more information on our website here.

Thanks for watching and see you next time!

HTML

<i class="ds-icon-blue fas fa-rocket"></i>

 

CSS

i.ds-blue-icon {
font-size:35px;  
color:blue;
border:solid 1px;
padding:10px;
border-radius:10px;
background-color:azure;
}

 

___

License: This CSS snippet is created by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

1 Comment

  1. Andy

    Thanks for this – I have seen Font Awesome being advertised but never really had a look. Seems pretty easy – thanks for sharing 🙂

    Now how do you get that spider bobbing up and down 🙂 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.

Next snippet How To Add More Social Media Icons to Divi's Header and Footer