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.

MD 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.

MD font icons JSON file

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:

IcoMoon app

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.

Edit font icon names

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
Upload custom font icons to your site library

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!

Start Building Websites That Delight

You can use the Marketers Delight WordPress Theme on unlimited sites. New features & updates are delivered to sites with your active license key.

Add to Cart

About Alex

Alex is the 29 years old creator of Marketers Delight.

Forum replies (8)Comments (0)

Loading new replies...

Alex

MD developer

6,927 messages 1,952 likes

Just a heads up, we are updating our release process to now offer public betas before declaring new version of Marketers Delight as stable.

The new Font Icons Manager is part of MD5.2.3 Beta 1 which is now available from your account area. See the full changelog here.

MD5.2.3 Beta 1 is stable and safe to use on live sites, but for less advanced users I don't recommend you use beta software on live sites. There is possible some bugs have slipped through the cracks and we will be using this extended beta testing period to iron those out before officially recommending anybody update their live sites to new versions of Marketers Delight.

I will write a new blog post explaining this new release process in more detail, and if you want to try MD5.2.3 beta now you can download the new version from your account area and manually install the theme in Appearance > Themes.

Please use this thread to discuss the Font icons manager, and if you experience any bugs with other parts of MD5.2.3 please open a new thread in the support forums.

See the full changelog here

Reply 2 Likes

click to expand...
gauravtiwari

Blogger

302 messages 126 likes

I cannot see any icons at https://marketersdelight.com/font-icons/

Did you change icon classes totally? Remove md-icon-* class will affect all the existing sites.

Reply Like

Alex

MD developer

6,927 messages 1,952 likes

I cannot see any icons at https://marketersdelight.com/font-icons/

Did you change icon classes totally? Remove md-icon-* class will affect all the existing sites.

No, the md-icon- class names have not been changed in CSS but are no longer stored with the md-icon- prefix in the database. There is still backwards compatibility for this in any existing options that saved icons before, like in the Optins and any Gutenberg blocks, but you won't have to worry about losing any icons data in this update.

I have just updated the page to show the proper icon details.

Reply Like

click to expand...
gauravtiwari

Blogger

302 messages 126 likes

Good.
I think you missed a comma on line 26 of searchform.php in the beta.
<button type="submit" class="search-submit form-submit <?php echo md_icon( 'search', true); ?>" id="searchsubmit"></button>

Shows Critical Error on Search otherwise.

Reply 1 Like

Alex

MD developer

6,927 messages 1,952 likes

Good.
I think you missed a comma on line 26 of searchform.php in the beta.
<button type="submit" class="search-submit form-submit <?php echo md_icon( 'search', true); ?>" id="searchsubmit"></button>

Shows Critical Error on Search otherwise.

That's annoying, thanks for letting me know.

Reply Like

gauravtiwari

Blogger

302 messages 126 likes

One more. Pinterest share still uses the class md-icon-pinterest-squared.

View image at the forums

Reply 1 Like

Alex

MD developer

6,927 messages 1,952 likes

One more. Pinterest share still uses the class md-icon-pinterest-squared.
View attachment 3162

Strange, I still see some inconsistencies with how a few icon classes are rendered on your site, including the md-icon-pinterest-squared class. The class name was changed to remove squared in MD5.2.3, but the old class name is left there for backwards compatibility. Can you try saving your MD settings and let me know? I want to see if it rebuilds your stylesheet with the proper icon class name.

Reply Like

gauravtiwari

Blogger

302 messages 126 likes

Yes. It was WP Rocket cache.

Reply 1 Like

Leave a Comment