Icon Fonts!! The way forward!

November 2, 2012

With the creative design industry evolving everyday it can sometimes be hard to stay current and up to date with ‘New Trends’ and better ways of doing things, this is why we are going to bring you – over the next few months – resources, new techniques and also hints and tips on how to execute them effectively.

Today we will be letting you know a little bit more about Icon Fonts. This short article will describe how to use them, when to use them and how they work!

Firstly we will run through why you should use them, have you ever used an icon to describe a service or menu item? If you have then you will know that it is always a transparent PNG and is then imported into the HTML or CSS of the website. This is great and has been used for years but with the introduction of mobile devices and larger desktop screens we need to icons to grow or shrink without losing any resolution, even more so on the new ‘Retina’ display Apple Macs.

All you do is locate an Icon Font, we suggest icomoon as a starting point, download it and apply it within your CSS code! It really couldn’t be simpler. Because the web browser will render the font rather than load to picture this almost turns the icon into a vector shape which will expand and contract to any size without losing resolution.

Icomoon is a fantastic resource for this and through a little bit of research you will be able to find in-depth tutorials on the exact code needed for them to work within your website.

Thanks for reading guys!

Let's work together

We are passionate about innovation, ideas and experience. Tell us about yourself and your project and we can start the ball rolling.

    Please confirm that you are permitting us to contact you in relation to your enquiry. For details on how we treat your data, please refer to our Privacy Policy.

      Sign up to our mailing list: