Divi includes a very nice icon set, the Elegant Icon Font. It has a stunning 360 icons, however that was not good enough for me. 🙂 So I checked around a bit.
There are couple of free icon font sets on the web. My personal favourite is Font Awesome, which I believe is becoming the non-plus-ultra in this area and it’s totally free! The collection (version 4.3.0) currently packs 519 amazing icons for different categories like web applications, gender icons, file types, and so on. Even some Star Wars related ones!!! Click to see how to integrate it in your Divi powered WordPress site and get some tips on formatting.
The easiest solution
Head over to the store and download the Font Awesome for Divi plugin for FREE!
It’s a very simple plugin, no programming, no configuration needed. Just activate the plugin on your site and you are ready to go.
The plugin basically does what is out lined below.
Integrating Font Awesome into Divi
You have several options here. You can download the whole Font Awesome package and serve it “locally” from your server. To to this follow these instructions from the Font Awesome site:
- Copy the entire
font-awesomedirectory into your project. - In the
<head>of your html, reference the location to your font-awesome.min.css.<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> - Check out the examples to start using Font Awesome!
Or you can do it the easiest way and have it served by a CDN. For this do the following:
- In the WordPress admin go to Appearance > Divi Theme Options > Integration
- Make sure that the Enable Header Code is enabled
- Add the following line in the box which says Add code to the < head > of your blog
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
- Save the settings and you can start using the awesome fonts.
That’s a start.
I will not explain how to put in an icon, or create a list. The creators site has an excellent explanation / example page for that. So check that out how to implement simple icons, bulleted lists, turning icons and other funky stuff.
What you still need is some formatting though…
Tweaking the CSS for the bulleted lists
So, you can already start using fonticons. Hurray!!! And the inline icons work perfectly.
You deserve a biiig cake!
The bulleted list needs some formatting though because Divi does the list formatting a bit differently than usual. So you need to add this code to your theme’s css file or in the Divi Theme Options > General > Custom CSS field:
.fa {
line-height: inherit !important;
}
.fa-ul {
list-style-type: none !important;
}
.fa-li {
top: 0px !important;
}
With these 4 simple lines of code you have Font Awesome ready to be used in your Divi powered website.
Have fun!!!
And please, don’t forget to like or share the post if you liked it. 🙂
And for testing here is a Font Awesome 5 icon. Or maybe not. 🙂
How would get an icon (within) a divider to display please.
————- icon ————–
Hey Al,
Super-easy solution would be using a text box. Set it to center alignment and add a content like this:
------------ < i class="fa fa-icon" >< /i >------------(Obviously remove the spaces from the HTML tags.) If you want to combine it with the Section Divider, then I can look into that.
Excuse me, I ‘m a beginner . Where I have to put the code that I can see the icon? Divi has the option in each module add custom css. Thanks for your help!! 🙂
Hi Cristian,
In your WordPress admin go to Divi > Theme Options > Integration
There enable the “Enable Header Code”, and paste the following line to the textbox that says:
“Add code to the < head > of your blog”
Hope this helps! Let me know if you need more guidance!
The CSS code you see at the end you need to put to
Divi > Theme Options > General > Custom CSS
I’m only getting the FA icon on the first item of the bulleted list. What am I doing wrong?
Here’s the page I’m working on:
http://www.warmkaros.co.za/bed-breakfast/
Hey Rob, thanks for reaching out!
You need a class designation for the ul tag, like this:
<ul class="fa-ul">Ah! Thanks, I missed that in the examples on examples page. Thanks for an excellent resource.
great tutorial and it works – but I have one error
when I use font awesome, it doesn’t use the custom font set in advance design settings of divi
It’s a text field with the following code – the icon looks great, but the sampletext is not my chosen font.
Sample text
any idea?
Hey Martin,
Thanks for reaching out!
Can you share a link where the problem exists? I’ll try to check and help out.
Cheers,
Andras
how to icon align in menu. Currently icon showing overlay on menu text
Hey Pankaj,
It is pretty difficult to give a solution out of the blue… If you create a sample page, then I can try to help you tweak the css so it looks the way you want.
How can I add this to a button in Divi if I don’t want to use the ones that Divi has (not as an image). I tried to put the class in the text of the button, but it parses it as text.
Thanks
Hey Kostas,
Good question! Unfortunately I don’t know. I still need to figure that part out.
I need the same. Would be great if we could use the fontawesome icons in Buttons.
Hi Domenic
In case you don’t have the solution yet, I just posted it here in a reply:
http://www.divi-magazine.com/using-font-awesome-with-divi/
Hope that helps!
Cheers
Hi Kostas,
In case you don’t have the solution yet, I just posted it here in a reply:
http://www.divi-magazine.com/using-font-awesome-with-divi/
Hope that helps!
Cheers
Sorry for the ‘newbie’ question – but I have followed the instructions – been to the FA site and have found icons I want to use – but how do I use them in DIVI? Do I need to place them with CSS? I can’t see anything different in the list of icons available say for the blurb element.
Thank you!
Hello Jason,
Thanks for getting in touch and sorry for the late reply, I was forced off-screen b/c of a small accident.
You will not see new icons in the icon list, unfortunately that is not a feature of the plugin.
You will need to manually add the icons in your text. When you are editing a page then switch to text mode and add the required code for the icons. There are examples on this page:
http://fontawesome.io/examples/
I hope this helps and feel free to write back if you have more questions. I’m more than happy to help.
Also you might want to check this post:
http://www.divi-magazine.com/more-font-awesome-icons-in-a-blurb/
Cheers
Hello Andras,
Thanks for your tutorial!
I have just one question — is there a way to use font awesome in Divi’s buttons? For example before or after the text.
Thanks is advance 🙂
Hello Maksym,
Yes, it is possible. You will need to add some css declarations, something like this:
.et_pb_button::after {content: "\f0fc"; /* Beermug */
font-family: "FontAwesome" !important;
font-size: 24px;
padding: 6px 0 0 6px;
}
You might need to adjust the class declaration, the part before the “::after”, and maybe the font-size and padding, if you want a different size.
Hope this helps!
Cheers
Follow this instruction, I got ‘square’ unidentified character, instead of font-character of FA.
here the css that I put in custom css [:before] of the button:
content: “\f232”; /* Whatsapp */
font-family: “FontAwesome” !important;
font-size: 24px;
padding: 6px 0 0 6px;
display: block;
Hi Totok,
Do you have a url you can share where the issue is visible?
Link to the plugin is not working anymore 🙁
Ronald, thanks for the heads-up! I fixed it.
Hi
I need the icons in Blurbs. Where should I put the “i class” class of font awesome in Blurbs? Should I put “no” to the use of an icon and put the “i class” in the image field in the blurb configuration?
If I need the camera icon, for example, should I insert “” in image field?
Thanks you!
Hi Gabriela,
I’m sorry, I only discovered your comment now.
These 2 articles give you detailed description on how you can use them in a blurb.
https://divi-magazine.com/how-to-replace-the-blurb-icon-with-font-awesome/
https://divi-magazine.com/more-font-awesome-icons-in-a-blurb/
Let me know if you still need further help.
Cheers,
Andras
make a video tutorial for adding fontawesome on divi 🙂
Hey Rakibul,
Thanks for the idea! Hopefully I will get to that soon! With a next release maybe. 😉
Cheers,
Andras