Wordpress Icons: Tutorial to add icon fonts

How to add custom WordPress Icons

What’s the easiest way to add WordPress icons in your theme?

In this blog we will show you how to easily add icon fonts in your WordPress theme, step by step. Icon fonts allow you to add vector (resizable) icons without slowing down your WordPress website. They are loaded like web fonts and can be styled using CSS.

Font icons load faster than image based icons and help in improving website performance. There are several free and open-source icon fonts available that have hundreds of beautiful icons.

Some of the popular icon fonts are:

  • Font Awesome
  • Genericons
  • IcoMoon
  • Linearicons
  • Material Icons by Google
  • The Noun Project

In this article, we will be using IcoMoon. IcoMoon is a fun & easy tool for creating custom & regular font icons. Font Awesome is another alternative that happens to be the most popular free and open-source icon font available.

Generating A Custom Icon Set using Icomoon

How to import Font Icons from IcoMoon to your WordPress site - Generic Theme

Using Icomoon App, you can generate a custom icon set to upload. The first step is to select which icons you want in your Custom Icon set. There are a range of both free and paid icon packs you can import into the Icomoon App, and you can even import your own icons

Import SVG into IcoMoon

  • Place this – https://icomoon.io/app/#/select URL in your browser.
  • You can easily upload your SVG files using the Import Icons button.
  • Highlight the icon you want to use.
  • The next step – Click on the Generate Font button. This will generate your icons into fonts.

Download .zip folder

  • After you click Generate Font, it will take you to the window where you can download your .zip file
  • Before downloading the font, please click on Preferences.
  • Make sure “Support IE7 & IE6” and “Includes Metadata in Fonts” options are ON.
  • When you’re fine after organised, click on the Download button to download .zip folder.

You can use the above custom icons in two ways:
Option 1: Import Them as Media
Option 2: Use a Plugin

How To Upload And Use Custom Icons In Avada Theme

Custom icon sets are created and managed through the interface found at WordPress Dashboard > Fusion Builder > Icons.

Here you can both create and manage your custom icon sets. To make a new Custom Icon Set, give your set a name and click on Create New icon Set. This will take you to the Edit Icon Set page. From here, there is a link to the supported icon tool – Icomoon. This link will open in a new tab, and you can create your icon set. If you already have an icon set downloaded, you could just select the file. We will go through the process of creating one.

Once you have selected which icons you want in your set, you then generate the icon set, which you can then import into Avada. One important thing to note is that every icon pack you upload must have a unique Font Name and CSS Class Prefix before importing into Avada. You can change the Icomoon defaults in the preferences section before downloading your custom icon set, as seen below.

How To Upload Your Custom Icon Set

After you generate and download your custom font set, you have to upload it to your site.

Back on the Edit Icon Set page, you will find a simple upload interface to upload your custom font set. (There is also a shortcut to this page in any element that has the Icon Picker. Here you will find a Plus button in the top right corner of the Icon Picker, which takes you straight to the Custom Icon page.)

To upload a Custom Font Set, simply give the Icon Set a name, and then click on the Select Files button. Navigate to your icon set (as a zip file) and select it.

Then just click Publish in the right hand side. This will load the Custom Icon set. If you need to update the set later on, there is an Update Custom Icon Set button you can use to reupload the set, as seen below. The icons will now be available through the Icon Picker, in their own tab.

OK, that’s it. Your custom icon set is now installed. To use it, head to any element that uses an icon, including the Icon Element. There, you will see any custom icon sets at the top of the icon picker, and you can now just choose the set and select icons from that.