See now how to create your own web font icon pack with the IcoMoon app to upload and use awesome icons on your site or even your WordPress project. Webfonts are a great alternative to images when you’re adding icons to your web page.

A recent article, Webfont Icons: an Alternative to Images, explained how you could load a single font file such as Iconic and apply icons using CSS pseudo-elements, e.g.


<style>
.rss:before
{
	font-family: "IconicStroke";
	content: "r";
}
</style>

<a href="rss.xml" class="rss">RSS Feed</a>

There are several advantages to this approach: Webfont icons work in all browsers (including IE6), which can be scaled to any size, and hundreds can be packed into a single efficient font file.

Unfortunately, it would help if you rarely had hundreds of icons. It’s a little wasteful to use a large font file when you only require a handful of icons. The situation is made worse if you require a few icons from several different font files.

They also introduce a minor accessibility issue. Adding content using CSS pseudo-elements can trigger screen readers to speak the text. In our example above, you could hear your PC stutter “r-RSS feed.”

IcoMoon to the Rescue

IcoMoon is a fabulous HTML5 application that solves these problems for you. It allows you to:

  1. Firstly, browse and search 600+ IcoMoon icons
  2. Secondly, upload single SVGs or your own font packs (SVG fonts support)
  3. edit icons directly in your browser
  4. add any number of icons to a font collection
  5. assign those fonts to any characters, e.g., rather than using ‘r’ you can use a space character to ensure nothing is ever read aloud
  6. Finally, download example code and tiny bulletproof font stacks containing the icons you selected

To start, visit the IcoMoon app on the page. Where you can upload, browse, and search icon collections. You can select or deselect any number of icons by clicking:

Hover over any icon and click edit to perform basic editing such as rotating, mirroring, and shifting. You can also download an icon as an SVG, edit it in Illustrator, Inkscape, or SVG-edit, and upload the changed version:

How to Create Your Own Web font Icon Pack With IcoMoon - Visualmodo

Once you’re happy with your icons, click the F icon in the black bar at the bottom of the screen to view and rearrange your selection. You can assign an icon to any character by clicking the top bar and pressing the associated key or clicking the bottom bar and entering the Unicode index number:

How to Create Your Own Web font Icon Pack With IcoMoon - Visualmodo

Finally, click the Download Font icon in the bottom black bar to grab your custom ZIP file.

IcoMoon is one of the most useful web development applications I’ve seen, and it eradicates several issues associated with web fonts. Highly recommended.

How to Create Your Own Web font Icon Pack With IcoMoon

In this case, you don’t want to build your own icon pack. You can download our exclusive Visualmodo icon packs to upload on your WordPress following these links.

DESIGN https://visualmodo.com/wp-content/uploads/2017/05/design.zip

FOOD https://visualmodo.com/wp-content/uploads/2017/05/food-icons.zip

INTERFACE https://visualmodo.com/wp-content/uploads/2017/05/interface.zip

LINE ICONS https://visualmodo.com/wp-content/uploads/2017/05/linearicons.zip

SPORTS https://visualmodo.com/wp-content/uploads/2017/05/sports.zip

Share This Post