We love icon fonts and use both The Elegant Icon Font (by Elegant Themes) and Font Awesome on many of our projects – however felt there is lacking the more “detailed” icons. We have started a journey to bring you these. Our first pack is aimed towards Creative Agencies and include icons that can be used to outline different services or ideas in the web, design and print world.

Divi Engine Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. The result is crisp, beautiful graphics on any display (including Retina displays).

First thing you need to do is to download the icon fonts, if you haven’t done so you can download it with the link at the top or bottom of this post. Once you have downloaded it, extract the folder. In this folder you will see a css file called “divi-engine-wb-font.min.css” and a folder called “fonts”. Follow the steps below!

Step 1

Upload the files (divi-engine-wb-font.min.css and the folder called fonts) to your child theme. If you dont have a child theme you can read our other resource on creating a dynamic child theme and you can download a template from there.

Step 2

Enqueue the css file so that it loads on your site. To enqueue the css file add the following code to your child theme’s function.php file.

[php]

add_action( 'wp_enqueue_scripts', 'divi_engine_creative_icon_font_enqueue', 20 );
function divi_engine_creative_icon_font_enqueue() {
wp_enqueue_style( 'divi-engine-wb-icon-font', get_stylesheet_directory_uri() .'/divi-engine-wb-font.min.css', array(), '1.0.0' ) ;
 }

[/php]

Step 3

Now you are ready to use the icon font. You can use it in two ways – add the code in the html or in the css. We have included all the code you need for each icon above. We will use the icon called “icon-browser” as an example.

HTML EXAMPLE
Copy the first box of code where it says “class”. Add the following html to display the font

[html]<div class="icon-browser"></div>[/html]

This will display the following:

So all you need to do is to copy the “class” box and paste it in a div to show the icon.

CSS EXAMPLE
Copy the second box of code where it says “content”. First create a div or a span or any html tag and then give it a class. It doesnt matter what the class is but it is helpful to have it named the same as what the icon is.
Below is my html

[html]<div class="browser"></div>[/html]

or

[html]<h3 class="browser">Wow, this is awesome!</h3>[/html]

Now go and add your css – target the class you just created using ::before

[css]
.browser:before {
content: "\e02f";
}
[/css]

You can go even further and change the size of the icon, color, drop shadow and even animations for the more advanced user.

[css]
.browser:before {
font-family: de-wb-font;
content: "\e02f"; /* Replace this line with your desired icon code */
font-size: 100px;
color: #83bf5e;
}
[/css]

This will display the following:

Wow, this is awesome!