In today’s insane world, people are connected to each and to the rest of the world through the internet. People demand more internet speed for faster load time of web pages but not everybody has the same internet connection speeds elsewhere in the world, so web developers find new ways to make page load time faster. One strategy is using Font Icons.
Fonts Icons are just simply fonts. Instead of containing letters or numbers, they contain custom symbols and glyphs which you can style with CSS in the same way as you would style regular text.
Benefits of Using Font Icons
You can style them using mad CSS effects, so when there are edits that need to be done right away on the icon. Like a color change for example, you can easily do it faster, conveniently and directly in coding rather than redoing the same work in Photoshop, Illustrator, or whatever image editing or vector based software you use and then having to upload it on the website in which is definitely a hassle.
They can be scaled down and up, because font icons are vector based. Yes, they can be scaled to whatever size you want without sacrificing or losing image quality unlike what happens with jpegs, png’s and other bitmap formats when you do so.
They load way faster because their file sizes are much smaller. They make your page to load faster compared to using jpegs or png’s with bigger file sizes that could sometimes take forever to load depending on your internet connection.
Font Icons are supported on all browsers even on older versions of browsers so displaying them across different browsers is like knife through butter.
Limitations of Font Icons
There are limitations to how far and when you can use font icons. For example, you can’t turn a complex photo with multiple levels of color depth into a font icon and expect it to look exactly like the original. Well, this isn’t the best solution for this case.
Before, they were just limited to two tone colors. Take for example on Project Assistant’s services pages and home page, the font icons you see there are in dual tone colors.
But now you can do two or more colors on complex images by stacking multiple font icons to create the illusion of having a single image. And with some badass CSS skills, you can apply it and beef up how your icons will look like.
Applications of Font Icons
Examples of where to use font icons are on logo’s, menu icons, social media icons and others alike. Especially when you have a whole bunch of icons to show your website this would be a great way of handling them.
How to create Font Icons
Using Adobe Illustrator or any other vector based tool that can support .svg format for output, you can do custom polygon shapes or whatever sophisticated complex forms of graphics, save them as SVG’s and use online tools like Font Awesome and Icomoon to convert them to Font Icons and use them on your website. Simple as that.
Font Icons from a Web Graphic Designer’s Point of View
As a web graphic designer, we always need to consider page load time when doing whatever graphic content or design we are working on. Using font icons as a way of showing some design elements on your project is one of the best solutions out there.
