How to Use Icon Fonts on Your Divi Website

In December we released a pack of 100 Line Style Icons. Today we are giving you exactly the same icons but in web font format with an extensive tutorial on how to add them to your website.

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.

Subscribe to download for free

You have Successfully Subscribed!

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.

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.

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 CSSIn 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

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.

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

Extended license

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.