Font Awesome’s awesome toolkit is all the rage at Signals this October!



We would like to share our experience of a new technology which represents a potentially significant change in the way web pages deal with manipulation of small icons and symbols. It’s brilliant for responsive design, and we can create our own stylesheets full of icons. Both sides of the Signals studio – programmers and designers – have been pretty excited about it for a while. It is a toolkit called Font Awesome.

According to its makers,:

“Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.”

Debbie gives us the designer’s point of view on the file format used for preparing icons in Font Awesome:

“SVG is a vector scalable graphic, so it’s not resolution dependent and can be scale up and down without losing sharpness. Only one version of the graphic is required so it’s good for responsive design in that we don’t need to create the icon in several different sizes. A current design trend is to use flat designs and infographics to describe content in a more visual way, and the SVG file format works perfectly for this; the infographic/illustration will retain its sharp corners and smooth lines whereas the png file format can pixelate the edges.”

Gianna brings a tech point of view on the toolkit:

“We have more control over the size and the colour and shadows, all within a stylesheet (css). There’s not a lot of magic in responsive design – it’s just changing the layout of a page for different platforms using stylesheets. Now we can create any icon we like either custom, or to be used across multiple sites. It’s worth keeping an eye on fontawesome’s site if you want to see what the future will hold.”

A little thing that is making big waves where we are sat.