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:
- Web Symbols (free)
- Raphael Icon-Set (free)
- IcoMoon (paid)
- ClickBits (paid)
- InfoBits (paid)
- Tipogram (paid)
- Fico (paid)
- Signify (paid)
Very informative and impressive article. unique information.
Thanks for sharing the great idea on How to make icons. I was thinking how to make icons with extraordinary look. But the idea of using these font really helps to sort out my confusion.
Good stuff here mate. I have been struggling with a few diffrent techniques to incorporate but this really help. Thanks, cheers mate !!!
tre
It’s a great idea and never really though of doing that.
Thanks for sharing! Which program can you use to make these icons?
OMG! why haven’t i thought about this idea since now!