How to add Custom Font Icons in your Wordpress

What’s the easiest way to add icon fonts in your WordPress 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 website. They are loaded like web fonts and can be styled using CSS.

Compared to image based icons, font icons are much faster which helps with your overall WordPress website speed. There are several free and open-source icon fonts available that has 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. (You can also use – Font Awesome – It is also 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 – 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 Fusion Builder > Icons, from the WordPress Dashboard.

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, but let’s 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

Once you have generated and downloaded your custom font set, you now need 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.

Leave a comment

You must be logged in to post a comment.