We've started using icon fonts as a way to display simple images that can be treated as fonts in our CSS. These icons can be styled using the usual font attributes and crucially they stay sharp on high definition screens. That means it’s quick and easy to change their size, weight and colour.
Stock libraries of icons are available from several sources. Some of the best sites are:
These are great for icons you might need all the time, like an envelope to indicate email or a trash can for ‘delete’. Also available are the myriad of social media icons that are now used on most websites.
To make custom font icons and font sets we use the IcoMoon App. It’s a straightforward process. Just go to Import Icons and select your vector graphic files.
Here’s how our designer makes our svg files:
When you’ve uploaded your svg file to IcoMoon you’ll see your icon appear at the top above the IcoMoon – Free options. You can select it, and click Font at the bottom of the screen.
When you click Download on the next screen you get a kit containing the font files and a style sheet containing the @font-face properties you’ll need. I usually copy these into my main CSS sheet.
Css tricks has a good demo of what can be done with font icons.
This website - in the menu
Courier Direct - circles under the slideshow
Westcountry Waterjet - rectangles below the slideshow