How We Created RPG Awesome

When @nagoshiashumari and I (@idmontie) set out to create an easy-to-use font library, we didn’t realize the amount of work that would go into finding, curating, and organizing all of the icons so that developers could use them on their site. We aimed to create a font library that provides cool RPG and game related icons.

Libraries like Font Awesome are pretty cool. You get nice scalable icons in your project without having to include images or SVGs. All you need is a font and a dash of CSS and voila! You’ve got yourself some amazing icons.

We really liked how easy it was to use Font Awesome and have nice, scalable icons that you could embed with the text on your website. This is what inspired us to make RPG Awesome; but with some more niche icons specifically for games.

RPG Awesome is a CSS font library made to work just like Font Awesome, but to bring you RPG and gaming themed icons instead.

Generating the CSS

When you add Font Awesome’s CSS stylesheet to your document, what you are really doing is just adding font-face rules that tell the browser where your font files are. That’s easy to do, the harder part is actually creating these font files:

@font-face {font-family: 'RPGAwesome';src: url("../fonts/rpgawesome-webfont.eot?v=0.1.0");src: url("../fonts/rpgawesome-webfont.eot?#iefix&v=0.1.0") /* ... */;font-weight: normal;font-style: normal;}

The more tedious part about the CSS is generating all of the classes for all of the characters in the font:

.ra-axe:before {content: "";}

Creating the Font

Before we can even think about creating the entire mapping of class names to characters in our font, we need to find some good SVGs to use. Luckily for us, @nagoshiashumari found game-icons.net, which has an amazing CC BY 3.0 license. This permits us to adapt their works for any purpose, as long as we give appropriate credit.

@nagoshiashumari painstakingly curated their archive of SVGs. Lots of icons needed to be cleaned up, and some of them just needed to be thrown out. In the end, she found 495 usable pictographics that are included with the font.

In order to create the font files and the mapping necessary to use our icons, we take all the SVGs and add them to an IcoMoon.io project set. This tool lets us quickly convert hundreds of SVGs into one single font. Even better for us, this online tool generates the mapping between font characters and class names!

You can see all of the raw SVGs uses in the font here: nagoshiashumari/rpg-awesome-raw.

Publishing

Finally, now that we have the fonts and the CSS, we can publish it!

First off, we decided to open source all of the code to Github so that others could help us improve the font library and suggest new icons!

We then added support for different package managers as requested. We added RPG Awesome to Bower, NPM, and Meteor.

If you would like to help improve the font, read more about getting started, or generally show support, then check out our Github Repo!

Thanks for reading! If you liked this article, feel free to read more on The Capsule Cat Blog or follow me on Twitter.