Add, edit, and remove custom font icons with the MD Icons Manager

As search engines and users demand faster loading times, Marketers Delight takes a big step to help optimize the assets your website loads with the new Font Icons Manager.

Font icons are a website must-have, but not at the cost of performance

Using icons in your site’s design can be an important way to give user’s directional cues and improve your site’s overall navigation, but using most popular icon libraries tend to come at a hit to your site’s performance.

The easiest solution to adding font icons to your website, traditionally, has been to find a library like FontAwesome (much love) and load their many hundreds of icons to your page all at once.

This is a nice move for convenience, but with convenience tends to come bloat, and the problem arises that you may now have hundreds of icons, potentially many megabytes of extra resources to download per page load.

…and most of those icons you never end up using. What a waste!

This was a problem MD helped solve many years ago by including a minimalist font icons library in the default theme. While the lightweight icons set has never been a performance burden there have been some limitations.

For instance, if the icon you wanted wasn’t included in the default icons set, you would have to create a separate icons set of your own. Now you have more icons, but two separate icons library requests loading.

This isn’t the worst thing as you are still only loading the font icons your website needed, but we can still do this better! Now with the MD Font Icons Manager, we can. Let me show you how it works.

How to Use the MD Font Icons Manager to Add, Update, and Remove Font Icons

You can now see an at-a-glance view of all the font icons in your website’s library from the new MD > Site Design > Icons page.

The philosophy behind the Font Icons Manager is that you are not adding a new font icons set to your existing site, but adding onto MD’s existing icons.

This ensures your icon set stays minimal, and only one request is ever needed to load all of your font icons.

To begin adding custom font icons to your site’s library, start by downloading the new md-icons.json file that is now provided from your MD account area and import it to the brilliant IcoMoon App.

How to create a custom font icons set with IcoMoon

IcoMoon is a free tool (no account required) that let’s you visually build a custom font icons set and also provides you downloadable icon files when you are done.

Here’s what the default MD Icon set looks like once you have uploaded to IcoMoon:

As you learn the interface you will see that you can add new icons from IcoMoon’s library, upload your own icons, and even remove icons you don’t want from the default MD Icons Library.

All of these changes will be compiled once you click the “Generate font” button at the bottom of the page, where you will be brought to a screen where you can verify and change the names of your icons before you generate your font icons into a download file.

As you can see in the screenshot above, you can click on the name of any icon to edit its name and this is important because this is the name you will refer to the icon when you want to render it on your website.

In this example I’ve added two new icons called lock and plugin to my icons set. If all checks out, click “Download” to get a zip file of your new font icons. Go ahead and unzip it, and proceed to the next section below.

Adding the new Font Icons Set to your Website

Now that you’ve downloaded the IcoMoon font icons set you can quickly and easily add your new icons to your site.

There are two files needed from your IcoMoon download to successfully add new font icons to your website:

1. Upload the new md.woff file to the root directory of your child theme (wp-content/themes/child-theme-name/)
2. Upload the selection.json file to MD > Site Design > Icons

Once these two steps have been completed your font icons library will refresh and you can see the new font icons have been merged into your existing library.

The only thing missing from the IcoMoon font icons process is giving icons a label (not the ID you set previously), so MD helps you out by offering a simple icon label field you can fill out after the import process.

This step is not required but can be helpful for when you are selecting font icons in features like call to actions and Gutenberg blocks.

From here you can now render any font icon by simply calling the class name as designated on each icon. To use my new Lock icon I can simply write:

<i class="md-icon-lock"></i>

Pretty easy, right?

There’s more than just font icons in Marketers Delight 5.2.3

This post serves as an introduction to the new MD Font Icons Manager in the newly released Marketers Delight 5.2.3, and more will be revealed in a followup post once beta testing has been finished.

For now, you can help finish the development of MD5.2.3 by downloading the current beta version from your account and testing it on a staging site. Please report any broken functionality, weird behavior, or feature requests in the attached forum thread below.

Thank you so much and I hope you enjoy this new innovation in MD5.2.3!