When and I ( ) 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 so that developers could use them on their site. We aimed to create a font library that provides cool RPG and game related icons. @nagoshiashumari @idmontie 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 and voila! You’ve got yourself some amazing icons. CSS 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, @ found , which has an amazing license. This permits us to adapt their works for any purpose, as long as we give appropriate credit. nagoshiashumari game-icons.net CC BY 3.0 @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 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! IcoMoon.io 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 , , and . Bower NPM 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 or . The Capsule Cat Blog follow me on Twitter

Too Long; Didn't Read

Making security fun one episode at a time

How We Created RPG Awesome

Too Long; Didn't Read

Ivan Montiel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How We Created RPG Awesome

Too Long; Didn't Read

Ivan Montiel

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES