« HE:labs

Create custom icon font-families with Fontastic - No more pixelated icons on retina displays

Postado por Krystal Campioni em 14/05/2014

Oh.. the 90's. All those CRT monitors and 800px width table websites. Good ol' days when things were simple. Unfortunately, those days are over. Now we have zillions of different screen sizes and resolutions, and retina displays that are unbelievably beautiful pixel perfect resolution - and made every single layout you created before using images look like crap.

You probably had problems using image icons on responsive layouts before. Some of you probably solved this problem using different sizes of images for different displays ( @2x and media queries ) but the thing that really grabbed my heart when I started using was Icon Web Fonts.

As web fonts are scalable, you don't have to worry about setting different image paths for different devices. You just choose the font-family ( or families ) you are gonna use and that's it. Pixel perfect icons! :)

Now comes the mind-blowing tool: Fontastic

It's hard to find icon font families that actually have all the icons your are going to need in your layout, then you could have to import another font-tamily just to use a single icon. That's why I'm using Fontastic on all my recent projects. It's an online tool that allows you to create custom icon-font families gathering icons from different families and even uploading your own to create a custom set.

How to use Fontastic:

  • First of all, you need to create an account. It's free don't worry, and they say it's gonna be free forever: www.fontastic.me
  • Now just choose the icons you are going to use. Click on them to select any icon you want from any font-family available.
  • If you want to upload your custom icons to the set, just scroll down to the end of the page and drag and drop the SVG file there
  • On the "Customize" tab, you can change the character mapping and the the CSS classes
  • Now go to the Download tab and follow the instructions to download or publish your font on Amazon S3. A few copy and pastes and you are ready to go.

Just for the record, another cool feature you can use on icon web fonts instead of images is changing the color by CSS. Do you have another mind-blowing tip to handle icons on different devices? Feel free to drop a line about it :D


Sabia que nosso blog agora está no Medium? Confira Aqui!