Create Custom Icon Font Sets with IcoMoon

We freely admit that we are icon junkies and we love finding new icon sets to use in our projects. It’s easy to link to and embed to font libraries like Font Awesome, but in a collection of 400+ icons, you might only really use a few dozen. And if you need a specific icon concept that isn’t included, you have to settle for an icon that doesn’t communicate the exact idea.

Enter IcoMoon. With over 4,000 icons to choose from, you can pick and choose the icons you want, then output all the files needed to embed the fonts in your site. They even built in the awesome ability to export your icons as Photoshop shape files, so you can use the icons in Photoshop and scale them infinitely.

The cool thing about icon fonts is they are not images, but rather shapes that can be colored and scaled just like any other font. Here are some examples:

­
­
­
­
­
­

Building a Custom Icon Font

IcoMoon includes their own collection of about 490 icons, but you can choose from 17 other icon sets (at the time this was written) from various other designers. You can combine any icons from the different collections into one collection and download it for use on your site.

IcoMoon uses a browser app to enable building custom icon sets, and if you are a premium member you can save your custom sets to a cloud account. But free users can also download a JSON file that contains all their collection info, so if your browser cache gets cleared, you can simply upload the JSON file and resume where you left off.

To access the IcoMoon app, go to their site and click the IcoMoon App link in the top menu.

IcoMoon Browser App

You will then add icons from the library by clicking on the ‘Add Icons From Library…’ linkIcoMoon Add Fonts

The app will then present you with the available font sets that you can choose from to add to your collection. The first three are IcoMoon’s premium font sets and are not free, but all the sets after those are free to include in your collection. There are also additional premium sets at the bottom of the page.

IcoMoon Font Sets

Simply click on the Add button on any set you want to use, and the app will then allow you to choose the icons you want to use in your collection. You start with one font collection, but you can easily add additional sets at any time. After selecting your initial set, the IcoMoon app loads all the fonts in a very easy-to-use interface where you can click and select the icons you want to use.

Select Icons

 

Click on an icon and it highlights, click again and it is deselected. You can select or deselect all icons in the set in the collapsed menu in the upper right corner. You can also reorder your sets, reorder icons, and remove the set from the same menu.

You can easily add more collections to choose from by clicking the Library button in the top menu of the app.

IcoMoon Library Button

You will then be taken back to the font collection selections page where you can choose any of the other sets to add to your app session. The new set will be added at the top of your collection, but you can easily move it down the list from the collection menu. Any icons you selected prior to adding a new set will still be selected when you return to the page.

Once you have all the icons selected that you want included in your custom icon font file, it’s time to either save the icons in your choice of formats, or generate the icon font for use on your site.

At the bottom of the browser window, there is a floating menu that has two options. The left is ‘Generate SVG & More’ and it allows you to download the icons as PNGs, SVG files, PDF, XAML, a CSS Sprite, and even the cool Photoshop Custom Shapes (CSH format). To select which type of files to download, click the gear icon next to the ‘Download’ link in the left panel of the floating footer menu.

Save Fonts

The right side of the floating footer is where you’ll click the ‘Generate Font’ link to create the zip file containing the files you need to place on your server in order to actually do something with the icon font.

After clicking the link, the link turns to a Download button, and there is a gear icon to the right of the button. Click that to access the options for outputting the file.

Generate Icon Font

There are a lot of options you can set in the dialog, but unless you’re a diehard fontographer, you can leave the Font Metrics alone. Average users will not need to change any options in the Metadata or Version sections either.

You may want to change the CSS Selector option, however, depending on how you want to embed your fonts. If you want to use the <i> tag for embedding fonts, choose the first option. If you want to use attribute selectors instead, leave the default ‘Use Attribute Selectors’ option selected. Lastly, if you prefer to use the icons as a CSS class, choose the third option.

Here’s how the three options look in code form.

<i> tag option

HTML Example

CSS Styles

Result

This is a leaf icon

Attribute Selector Option

HTML Example

If you are having problems with the WordPress editor removing the span tag because it is empty, try using &shy; (soft hyphen) between the tags. It gets converted to the to UTF-8 character if that is your charset, which takes up no space, but the tag is then not empty and will not be removed.

CSS Styles

Result

This is a leaf icon

Use a Class Option

HTML Example

CSS Styles 

Result

This is a leaf icon

Uploading IcoMoon Files to Your Server

Once you download the zip file from IcoMoon, the next step is to transfer the files to your server.

Unzip the package on your computer, and you will have a structure like this:

IcoMoon Zip Files

The demo.html file located in the root of the file is a useful document. It shows you all the icons in the font file along with their class names so you can easily copy and paste them into the HTML.

The selection.json file is the file you need if you clear your browser cache and need to modify your collection back in the IcoMoon app. Importing this file will rebuild the collection and modify it.

The style.css file is the stylesheet file that needs to be uploaded to your server. We normally create a new folder called ‘icomoon’ within our child theme and upload the icon font style.css file and ‘fonts’ folder there. If you are not using a child theme, you should be, because if you update your theme, you will lose any customizations you have made.

The fonts folder needs to be uploaded as well, and this will go INTO the new ‘icomoon’ folder within the child theme. The file structure on the server after the files are uploaded should look like the picture below. Your child theme folder name will obviously be unique to your site.

IcoMoon Server Files

Loading Icon Fonts to Enable Usage in WordPress

Once the files are uploaded, you need to add the code to your child theme’s functions.php file that will load the style.css file on your pages.

Open the child theme’s functions.php file (or create a new, empty functions.php file if it doesn’t exist) in the WordPress editor (Appearance > Editor). If your current theme does not have a child theme, see this page in the WordPress codex for instructions on how to create one. If you need assistance creating a child theme, please click here.

This is the code that will load the icon font on the front end of your site from a child theme’s functions.php file:

Note that the wp_enqueue_style function uses get_stylesheet_directory_uri() rather than get_template_directory_uri(). If you are loading the styles from a child theme, you need to use get_stylesheet_directory_uri(). If loading from a stand-alone or parent theme, use get_template_directory_uri() instead.

Verify that the style.css file has the correct ‘fonts’ folder prefix in the src URL for the individual font files. It should look similar to this:

If your style.css has a different folder name, you will need to change the name of the ‘fonts’ folder on the server to reflect the correct name.

Once you save the functions.php file, the font files should be loaded on the front-end of your site (what the visitor sees). You can verify the files are being loaded by viewing the source code for your page. You should see something similar to this:

The domain name and child theme name will be unique to your particular site. Within the source code you should be able to click on the link to the file and view the contents of the CSS file. If you receive a 404 error instead, double check that you are using the correct path structure to your style.css file in the wp_enqueue_style function.

Now that the styles and font faces are loaded properly, you can use the icons within your posts, pages, menus, or wherever you want to include them.

Examples of IcoMoon Icon Font Usage

Here are some additional examples of how to use IcoMoon fonts within your site. These examples make the assumption that when you download your custom collection, you choose ‘Use a Class’ and the class is the default .icon class.

Adding icons to your menu items

You will need to use a custom menu in order to add icons to your menu. In the menu editor (Appearance > Menus), insert the icons by adding the <i> HTML tag shown below to the ‘Navigation Label’ of each menu element. Just change the ‘icon-leaf’ class to match the name of the icon you wish to use.

WordPress menu icons

This results in a menu like shown below. We are using Divi theme on our demo site for this screenshot.

Divi Menu Icons

Styling lists with icons

To get rid of list bullets and replace them with icons, use code similar to this:

The result (after you change the icon names) will look like this:

  • This is a leaf icon
  • This is a rocket icon
  • This is a fire icon

If you want to use different colors for icons, simply add in some inline CSS to the <i> tag like this:

This gives us this result:

  • This is a leaf icon
  • This is a rocket icon
  • This is a fire icon

Dropping icons wherever you want

You can use icons anywhere, you just need to switch over to Text mode in the WordPress editor and add the code. For example, lets add an icon to the start of a paragraph.

This will add a larger icon at the start of the paragraph. The inline styles make the icon 70px, add margin to the right and bottom, float the icon left so the text wraps around it, and makes it green.

Here’s the result.

­Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis convallis imperdiet. Praesent imperdiet nibh ut nisi sodales molestie. Proin sodales tincidunt arcu vitae aliquam. Duis quam eros, molestie vel elementum eget, lobortis non velit. Pellentesque non aliquam lorem, at malesuada tortor. Sed vestibulum pharetra felis. Vivamus et mauris ut erat tincidunt porttitor et non turpis. Maecenas tempor nisi massa, in sagittis odio facilisis vel. Fusce feugiat laoreet sapien at imperdiet.

Tutorial Wrap Up

We covered a LOT of information in this tutorial, and we hope it gives you a new tool for your web design toolbox. There are a lot of things you can do on the IcoMoon website that we didn’t cover, like editing icons and importing your own custom icons. There is also a wealth of information on creating custom icons and general usage of the IcoMoon tools in the docs section.

Inserting icons via the WordPress editor in text mode is not the easiest thing to do for beginners, so you might want to check out our tutorial that covers creating shortcodes to simplify icon inserting. Instead of having to drop into text mode, you can insert icons via a simple shortcode and use parameters within the shortcode to change size, color, and aligment.

We hope you enjoyed the tutorial and happy coding!

Enjoy the Read? Share some Love!