Beautiful Icon Font Thumbnails
Karen Menezes on June 23, 2013This is an article in the 'Look Ma - No images!' series :)
Let’s face it: images on the web are a pain in the ass. Ever since Responsive Web Development became cool, images have been exposed for what they really are – a bandwidth/screen/device nightmare.
As far as possible, we should try and restrict their usage. SVGs are great, but converting them to font icons and serving them in one shot is even nicer.
When a client calls up and asks to increase the icon size by 20% or tweak colour values and shadows, it’s a breeze to make changes in the stylesheet directly. Unless, of course, you love opening your favourite image editor, making changes to the file, saving a copy to your image folder (plus an extra one for retina devices) and changing your markup and or CSS.
If you ask me, font icons are the most future proof way of doing things. The fact that they work down to IE6 is a bonus.
I pretty much use icon fonts for everything ‘iconic’ across the site - social media links, menu thumbnails, navigation buttons and arrows, back to top arrows and decorative elements on a page. If I’m working with a designer, I request them to send me the vector files and run them through an icon font generator. I use icomoon – it’s changed my life!
I save the JSON file that icomoon generates, in addition to the font files. That way, if I need to make changes later, I can load the json file and delete or add new icons in the app.
I’ve made a demo here with the finished files. I use a CSS reset and box-sizing: border box universally across my projects, but it will work fine with normalize.css and the content box model, so don’t worry :)
The demo works across modern browsers, except Safari, which still needs the webkit-gradient prefix. You can add that and other prefixes for complete browser support. You can read my article here about vendor prefixes, if you want to check browser support for common CSS3 properties like box-shadow, border-radius and gradients.
Since this isn’t an article about how to use icon fonts, I’ll directly go on to the stylised effects. There’s lots of good information online about adding icon fonts to your projects, and the generators have made this dead simple. If you’re comfortable using @font-face, this should not be a problem.
My favourite ones in the demo are the folded corners and letterpress effect. Feel free to use, abuse and enjoy. I’ve used multiple classes for each example (e.g. outerGlow, circle and foldedCorner), so it should be fairly easy to initiate your browser dev tools and use and swap out the classes you don’t need.
I’ve used three icons that indicate home, people and call.
I've given the icon spans a class of 'iconFont', and wrapped them in a div with a class of iconBlock.
The icon font files will map a font-icon to each character. I’ve set the display to inline-block so they are in-line and have a line-height of 1 (which ensures uniform padding on all sides). You can mess around with the colours, font-sizes, padding and margins to get the right look for your site or application.
I’ve added different classes to the iconBlock div for different effects. There's everything from icons with inner and outer glows, to leaf shapes and rounded corners, letterpress and embossed effects and folder corners. Enjoy and let me know if you've used them in your work!