tl;dr Use http://fontello.com to build custom icon-fonts.

Problems with the heart

When creating applications, webapps, apps or whatever front end I really learn to love fontawesome. The overall concept of having none-pixelated icons that not just scale but also, due to the single color nature of fonts, work in all color environments is super handy. Especially if you’re like me and lack the skills to create your own icon sets.

While I was searching for a nice skins for this blog I found the perfect match for my needs: LeaveIt. You’re looking at it right now. I just loved it instantly except for one little detail: the heart beside the page-name.

To fix that I took a deeper look into the skin-configuration and found out that they use a nice tool called fontello.com instead.

Fontello is here to help

Fontello is not a new icon font. It’s a web tool that allows you to simply pick the icons you need for your specific use case and helps you building a new font-file out of them. You can even combine icons from different sources.

  • Small files, have only the icons you need
  • One file download, combine multiple icons
  • Customizable unicodes for each icon
  • Export/Import your file set in a config.json
  • Add custom glyphs from SVG
  • Get a nice cheat cheet (see image)

Custom cheat cheet
Custom cheat cheet