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!