Blog

How to Add Custom Icon Fonts

WordPress Tutorial How to Add Custom Icon Fonts

This foundational tutorial is brought to you by our Support Experts as one of the most commonly asked questions on our Support Forum. Adding custom icon fonts to your WordPress site has become a staple of modern web design. They're incredible easy to use and help you spice up and add a unique element to your design.

The one drawback with some icon fonts is that even if you have only a handful of icons you want to use, you have to load the entire set which can be weighty and slow down the loading of your website. That's where a free custom icon font selection service will come in handy, and we're going to show you how to achieve this in 3 easy steps!

We've found Fontello's free service to be useful in helping us create a custom icon font that is handpicked by you. With the help of Themify's framework, you will have the option to automatically integrate your selected icons to your website.

1. Select Your Icon Fonts

To get started, let's first go to Fontello.com. Here you will be able to a number of different icon fonts that are available for free. The process is very simple. Just click on the icons you want to use, or click-and-drag your mouse to select multiple icons at once. You can select any icon you want from any of the fonts. After you have selected your desired icons, click on the red "Download webfont" button on the top right corner. The number beside it shows how many icons you have selected.

Fontello WordPress Icon Fonts Download Tutorial

2. Upload Your Custom Icon Font .zip File

After you have downloaded the custom icon font .zip file, head over to your website's WP Admin Dashboard, and follow these steps:

WP Admin > Themify Theme > Settings > Custom Icon Font > Browse Library > upload the ".zip" file you downloaded > press Save

Themify Settings Custom Icon Font Fontello

3. Use Your Icons

Would you believe it, that's absolutely all! Now anywhere in the Themify framework or Builder where you have an option to insert an icon, you will see the hand-picked icons from your custom icon font by selecting the Fontello option at the top.

Themify Settings Custom Font Option WordPress Tutorial

We hope this easy, peasy tutorial has helped build upon your WordPress foundational knowledge. Please let us know in the comments if you've found it helpful and what other foundational basics you'd like to see.

Reply

The New Global Style Feature is Here! We're celebrating with 20% off everything. Use coupon: GLOBAL20