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-awesome directory 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. 🙂

 

css.php

If you liked this post ...

... then share it with your friends!