Expand Your Theme’s Icons with Fontello

Extra Icons for Themes Made by ThemeREX, Axion, and Ancora

Many businesses opt to go with one of WordPress’s many themes when building their website. And these themes are great: They’re beautifully built and offer a responsive, SEO-friendly option for those on a budget.

The downside to using a theme, however, is that they can sometimes look similar to other websites, which can detract from your website’s unique presentation. Fortunately, there are ways you can further customize your theme to differentiate you from your competitors. One way to do that is through the use of icon fonts.

Icon fonts are collections of vector images that are saved in a web font format. This format allows you to easily add new icons to your website so that you can customize your website’s look and feel.

Most theme developers use icon fonts in their themes. For example, the icons you see in the header and footer of your website, on the services pages, and across the various widgets on your website are likely from an icon font. The upside to this is that, depending on the theme you’re using, you may be able to unlock extra icons.

In this guide, we’ll look at one such example called Fontello, which is a font icon service used by several popular themes, including those developed by ThemeREX, Axion, and Ancora. If you’re using a theme made by one of these development shops, we’ll take a look at how you can easily add extra icons to your theme so that you can personalize your website’s style.

About Fontello

Fontello is a website that allows you to create your own custom icon package by selecting from a massive collection of icons and packaging them into your own custom icon font. It gives you everything you need to add icons to your website without needing to know any code. And if you’re using a theme by one of the aforementioned developers, the process is even easier.

When you visit Fontello’s website, you’ll see a huge collection of fonts right on the front page. You can browse your options or use the search box to narrow down your choices. From there, you can select the icons you want and start adding them to your own package.

Let’s jump right into adding your Fontello package to your website!

Step 1. Select and Download Your New Icon Font Files

First you will need to select the new icons you want to add to your website.  You can do that right on the Fontello website.  But for truly unique icons, you will want to head over to Flaticons.com.  For detailed instructions on using the Flaticons website, check out our article on how to add a custom icon font to WordPress.

Once you’ve selected the icons you want, you’ll download a zip file that contains the icons and some configuration files. Extract the contents to a folder you can access easily, such as your desktop. The important file needed in the next steps is Flaticons.svg. Be sure to leave the Fontello website open in your browser because we’ll be using it again shortly.

Step 2. Locate Your Theme’s Fontello Font Files

Next, you’ll need to find the folder your theme’s font files are located in. For example, if you’re using the popular Jacqueline theme from ThemeREX, the files are located in /wp-content/themes/jacqueline/css/font-icons.

Depending on the theme you’re using, the exact location will differ slightly, so you may need to do some digging around, but they’ll almost always be located somewhere under /wp-content/themes/theme-name/.

Once you’ve found your theme’s icon font files, you’ll need to download the config.json. We’re going to use it to add all of your current theme’s icons to a new icon font.

Step 3: Add Your Current Theme’s Icons to Fontello

Back on the Fontello website, you’ll drag the config.json file into the custom icons area.

This will add all of your current theme’s icons to a new icon package.

Step 4: Add Your New Icons to Fontello

Next, you’ll need to add the icons you selected and downloaded previously in Step 1 into Fontello. To do this, you simply drag the Flaticon.svg file from the archive into the same custom icons area that you dropped the config.json file in.

Notice that your new icons from the Flaticons collection now appear at the end of the Custom Icons list. Add the new icons to the custom Fontello collection by clicking and selecting each icon.

Step 5: Download the Updated Fontello Icon Font Collection

You can now download your freshly minted icon font that contains your theme’s old icons along with the new ones you selected.  You can do this by clicking on the red Download webfonts button.

Step 6: Replace Your Theme’s Icon Font Files

You’ll need to upload your new icon font and configuration files to the same directory you downloaded the configuration file from (Step 2). The contents of your download should look exactly like what’s contained in your theme files, so you’ll simply drag the contents onto them and replace all the current files with the new ones.

And that’s all there is to it!

From now on, when you edit a post or page, you’ll see all the new icons you selected along with the ones you had previously. You can continue using fonts you already have, or you can go and customize your website’s look to make it more unique.

TIP: It’s important to keep in mind that your theme’s developer may override these files in future updates to your theme, so you’ll want to keep the Fontello file you downloaded handy in case you need to re-add to your theme.

Using Fontello to Expand Your Themes Icon Collection

If you’re using a theme that supports Fontello and you followed this guide—congratulations! You’ve now unlocked a whole new array of customization options for your website.

On the other hand, if you aren’t using one of the themes mentioned, but you still want to take advantage of a spiffy icon font, not to worry. We wrote this guide to walk you through the process of adding custom icon fonts to your WordPress website—regardless of the theme you’re using.

Customizing the icon fonts on your website might seem like a small change, but they can actually go a long way in making your website look unique and differentiating it from the herd of similar themes out in the wild.