Use Icon Fonts to Create Lightweight, Flexible Icons

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:

6 thoughts to “Use Icon Fonts to Create Lightweight, Flexible Icons”

  1. 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.

  2. Good stuff here mate. I have been struggling with a few diffrent techniques to incorporate but this really help. Thanks, cheers mate !!!

Comments are closed.