Fontastic icons – Efficient customised icon sets

Posted on January 9, 2014

 

Icons have always been a great usability addition to any website or application, giving the user an at-a-glance idea of what their function would be. Traditionally, these would have been designed in Photoshop, and if the designer/developer was particularly clever they would create them in a pixel map to save additional calls to the server for hover/rollover images. This is a common practice.

However, there is another solution that is a lot more efficient in both time and bandwidth, and is offered by icon fontsets such as fontawesome and Foundation Icons. These are custom fonts that could be presented to the user using the @fontface CSS declaration, and contain icons instead of alphanumeric characters. They can be displayed at any size without any noticeable reduction in quality, just as fonts can be. This in itself is a great solution and offers the designer more flexibility when it comes to defining and changing the icon colour and size without having to open up Photoshop each time; they just need a small change to CSS. With the increasing use of smart phones and HTMLl 5 coded applications, the need to trim down bandwidth use and load times has become even more important. The idea of having to download a complete font set when you are only using a select few of those characters in your application becomes a less attractive prospect.

Fontastic has offered a solution to this problem. You can cherry pick from an array of fonts and icons, mapping them to a character and downloading it as a usable webfont. This means you can trim and optimise your icon set to minimise the bandwidth cost for your website or app. Any increase in efficiency with regards to a website is a major leap forward – quicker load times and more responsive sites mean happier users.

Steven

Steven is Engage Web’s go-to man for all things web-related, bringing his knowledge of current trends in web design and development to the team.

Latest posts by Steven (see all)

Like us on Facebook to see more posts like this

You might also be interested in:

No Comments »

There are no comments on this yet, be the first to write a comment.

RSS feed for comments on this post. TrackBack URL

Have your say!

Call Now Button

We have worked with:

minute-man-press-image
TEL: 0345 621 4321