I love this post from CSS-Tricks about using icon fonts to create website icons. I’d never really thought about using this technique before, but it seems like a clever way to build considerable flexibility into how you present icons and symbols on a website.
As you can see from the example, it’s easy to customize their size and color which makes it simple to use them in various locations across a site — whether it’s in the header, the footer, or within the page content itself.
If you want to get started with icon fonts or need some ideas on the types of icons you can use, there are plenty of icon fonts available online. Here are some that are more useful for web designers:
- Erler Dingbats (free)
- Web Symbols (free)
- Raphaël Icon-Set (free)
- IcoMoon (paid)
- ClickBits (paid)
- InfoBits (paid)
- Tipogram (paid)
- Pictos (paid)
- Fico (paid)
- Signify (paid)
the 
