Using icon fonts has become a web design trend very quickly and there is a good reason for that – icon fonts give us unlimited possibilities of customizing the icons with CSS code. And aside from giving designers and developers more control – icon fonts also offer many features that bitmap image icons simply do not. Because the icon is actually a font character, it has the same properties as all other fonts, which means it is vector and scales splendidly no matter the size. This is extremely precious considering the increasing popularity of the retina displays.

Using icon font instead of icons images will also improve our site performance. We can use even 1000 icons on one page and they will be loaded only once, as a code, but if we use bitmap images – 1000 images will have to be loaded!

Below are the steps to embed and use a custom icon fonts on your very own website.

 

See Demo    Download Icon Font

Embedding an Icon Font

1. Download the Icon Font you wish to use.
In this tutorial we will be using the files from the download above, which contains an icon font we designed and generated with Icomoon. This package also includes JSON file with 3 samples that can be imported directly to your Divi library.

2. Open fonts folder and copy the code from “style.css” and paste it into your own “style.css” file.
This CSS file embeds the icon font via @font-face, and has a unique class for each icon, telling it which character in the font to use. This is also where unique styling can be added to each icon, however, to use different styles across your website it is recommended to add a new class for each new style.

We always recommend using a child theme for this. For more information on child themes see this article:
Child Theme Tutorial.

3. Copy the “fonts” folder into your theme directory:
/wp-content/themes/yourtheme/
If your theme directory already has a “fonts” folder, drag the contents from “fonts” into the existing folder.

Note: to edit your Child Theme files you need to connect to your server via FTP or use a File Manager (eg. in cPanel).

How to use Icon Font

1. Disable Visual Text Editor
If you are using WordPress you will need to disable Visual Text Editor because custom fonts will not work with it and you may lose all icon code added after saving the page. The safest way to use custom icon font within your WP installation is to disable Visual Text Editor. This can be done in Users/Your Profile.

2. You can now use your font across your website by adding icon classes or attributes.
Adding custom icon to the page is quite simple. We just need to add icon class to the text module using HTML icon tag. We can also an add additional class that will allow us to style selected icons just as we want.

We have prepared 3 Demo Sections to show you some samples of using custom fonts on your website. These all sections are included in the download package and can be imported to your Divi Library and added to any page on your website with ease. The icon package can be downloaded here.

Note: JSON file imported to your Divi library has a CSS styles embedded into first section.

Demo 1

For this section we used 3 Text Modules with HTML code inside.
Each Text Module has a blue icon, a title and description. Icons are added using icon class. All classes and unicodes can be found here. For this sample we also added 2nd class demo-blurb that will allow us to customize the icons. We defined font-size and icon color. For title we used H4 tag and Paragraph for description text.

See Demo

To style the icons we need to add a little of CSS to our style.css file located in a child theme folder or to Divi/Theme Options/Custom CSS.

Demo 2

In the second sample showcased in this article we also used Divi Text Modules but this time we added icons as a module background and added some more custom CSS so each box is changing appearance on mouseover.

See Demo

1. Add a row with 2 columns layout and tweak Gutter Options in Row Settings.
Open Row Module Settings, go to Design tab and set Use Custom Gutter Width to YES  and Gutter Width to 1.
These settings will remove spaces between boxes.

2. Add 4 Text Modules and customize their settings.
Each Text Module must have a custom class added and must be positioned relatively. All these adjustments can be tweaked in Text Module Settings under Advanced tab.

Note: Each module will have a different class: icon_wrap_a, icon_wrap_b, icon_wrap_c and icon_wrap_d. This will allow as to set different icon for each box.
Tip: It is a good practice to customize one module first and then copy it to other columns and change only class accordingly so all modules have the same settings and same appearance.

3. Add Text Module title, description and set background color.
Now we will add title and description to our Text Module Content tab and set background to #75797d

4. Add custom CSS
In this last step we only need to add Custom CSS. We will add icon attribute as a background, hover effect and add transition so all is working nice and smooth. Custom CSS should be added to you child theme style.css file or to Divi/Theme Options/Custom CSS.

Demo 3

Demo 3 is very similar to Demo 1 but we styled icons to be a circle, added blue background color and subtle icon animation on mouseover.

See Demo

1. Add a row with 3 columns layout.
For this sample we used 3 columns layout and 3 Text Modules. Each module has an icon with additional class, title and description. We will style icon by adding CSS styles to demo-circle-blurb class.

2. Add class to each Text Module.
To add animation when user mouseover on the box (not the icon) we need to add class to each Text Module. To do that open Advanced tab and add demo-circle-blurb-box class.

3. Add custom CSS.
This custom CSS will set our circle icon color and add nice icon animation on mouseover. This code should be added to your Divi child theme or to Divi/Theme Options/Custom CSS.

Wait! And what about Divi Icons PRO!

If you don’t feel comfortable with adding custom code to your website, Divi Icons PRO is for you! The FREE version of the plugin adds 360 custom line style icons to your Divi Builder so you can easily use these icons on your pages. The premium version of the plugin adds over 2500 icons in total!