Engage Web logo - horizontal-resized


Fontastic icons – Efficient customised icon sets

Fontastic icons – Efficient customised icon sets

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.

Latest posts by Steven (see all)

Get in touch

Please enable JavaScript in your browser to complete this form.

What is 7+4?


This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Book a consultation with Engage Web

Sorry to interrupt, but would you like to download our FREE Social Media Calendars?

Social Media Calendar Product Mock Up for web

 You can use them to plan your social media and content in advance, saving you time and getting better results. When you use our social media calendars, you'll always know what's trending and what to post about for your business.