Scalable Icons for your web site – Font Awesome

Font Awesome - Scalable Vector Icons for your Greensboro Web Site

Font Awesome

I am a big fan of high quality images on high resolution and retina screens. I started last year designing high quality images for the screens of high resolution and retina devices. I also include my icons with this as well. I researched designing for these types of screens and came across “scalable icons”. At first I thought I had struck gold, at least to me. I was going to enjoy the benefit of not having to create two separate icon sets for my standard and HD screens. I was really intrigued about a set of the scalable icons I had found called Font Awesome.

Font Awesome gives you scalable vector icons that can be customized through CSS. Let me stop right there and explain to you what a vector image is.

I will break this down for you “Scalable Vector Icon”

– Scalable: Is just what it saids resizable.

– Vector: The graphic or design is created by math not Pixels. Pixels is what a raster image (example: photograph) is made of. It is tiny blocks that make up the image. Once you enlarge a photo you will see that it starts to get blurry more you enlarge it. When scaling Vector images or icons, the image or icon will be recreated by a way of math for a nice and crisp clean look.

– Icon: Of course you should know what an icon is. It image representing something.

It is one font and has a choice of hundreds of icons. At the time of this post font awesome had 439 available icons. Another beauty of font awesome is it does not use any Javascript to make the fonts usable. Font Awesome caught my attention because when I was designing this Greensboro web design site I could use the icons and it looks great on retina and high definition screens. No @2x icons that I had to export and only one font, NO IMAGES! Below I have included an example of font awesome with different sizes and it does not matter what type of screen you are viewing this on the icons will look crisp and clear. Below I have created a few examples. As you can see I am change the size and color of the icon just by CSS and this will be nice and crisp icon on retina and HD screens. Please feel free to leave a comment if you have any questions.

Leave a Reply

Your email address will not be published. Required fields are marked *