How to Create Icon Fonts. Quick Start Guide

How to Create Icon Fonts. Quick Start Guide

Icon fonts are of great use to web designers. Why are these in demand? What makes them better than bitmap icons? What are icon fonts all about? How to create icon fonts? Let’s find it out in this blog post.

Basically, just like working with standard image based icons, using icon fonts you can do various manipulations, like play with color and size, manage shadow, etc. One might wonder there is nothing special about icon fonts, so why use them? Unlike traditional image sprites, these can be easily edited while retaining perfect quality. You can change opacity, rotate, add strokes, gradients, textures or whatever by applying necessary changes to CSS code. To put it clearer, have a look at the image below. Here you can see one of the icon fonts that we will further highlight in this tutorial opposed to the equal PNG image. Both artworks are proportional to each other in terms of width. I guess you can see the difference.

1

What Are Icon Fonts

Icon fonts are vector graphics that are added to content using CSS content property. Similar to regular fonts, icon fonts are scalable and can be managed using code. This is one of the biggest advantages of the latter over bitmap images. Lightweight and Retina-ready, icon fonts can be styled using CSS, similar to standard texts.

Icon fonts are the best choice from an accessibility point of view since they are scalable and are visible in high contrast on Windows. Bitmap images don’t scale well and lose quality when scaled up or down. Each bitmap image requires http request, which slows down load times of your page. The biggest drawback of the latter is that images can be reworked using an image editor only, unlike icon fonts.

The largest majority of modern web design studios make use of icon fonts in their works. We have decided that it’s high time for you to start applying these to your projects as well. That’s why in our today’s quick start guide to make icon fonts we’ll show you how to convert PNG icons into fonts.

The stuff you’ll need:

  • Adobe Illustrator – premium vector graphics editor
  • Inkscape – pro quality free vector graphics software
  • Fontastic.me – free online service that allows creating icon fonts fast and easy

——- Read more————————————————————————————————————

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s