30Nov2011
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:
- 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)
Posted on: November 30, 2011 | 6 Comments
Recent Entries in "Web Design"
- Forbes Doesn't Care About the User Experience (0)
- Easily Create iOS and Android App Store Badges (0)
- 15 Online Tools for Creating Great Content Ideas (1)
- Web Design Trends to Help You Spring Clean Your Resumé (7)
- Looking to Hire an Email Marketing Manager (0)
- Create Awesome Article Headlines in Seconds with the Content Idea Generator (23)
- Two Great Guides to SEO for Large Websites (1)
- Lessons Learned from Launching an Online Store on Magento (1)
- Pagination Design Showcase (0)
- Best Practices for Writing Email Subject Lines [Infographic] (0)
- 30 Call to Action Examples that are Better than Learn More (5)
- 50+ Examples of Highly Optimized Landing Page Design (24)
- Components of a Great Website Footer (0)
- Login Form Showcase: 65+ Examples of Login Form Design (0)
- CSS Rounded Corners 'Roundup' (65)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (20)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- Don't Make Me Think: A Common Sense Approach to Web Usability
- Web ReDesign 2.0: Workflow that Works
- White Space is Not Your Enemy: A Beginner's Guide to Communicating Visually through Web Design
- Basics of Web Design: HTML5 and CSS3
- Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
- Prioritizing Web Usability
- The Web Designer's Idea Book: The Best Themes, Trends and Styles in Website Design
- The Principles of Beautiful Web Design
- Convert!: Designing Web Sites to Increase Traffic and Conversion
- HTML and CSS: Design and Build Websites
- View more recommended reading…
6 Comments Posted
Very informative and impressive article. unique information.
1. Posted by mobile bingo on December 01, 2011
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. Posted by Dheeraj Bansal on December 02, 2011
Good stuff here mate. I have been struggling with a few diffrent techniques to incorporate but this really help. Thanks, cheers mate !!!
tre
3. Posted by tre2215 on December 07, 2011
It's a great idea and never really though of doing that.
4. Posted by Gareth on December 07, 2011
Thanks for sharing! Which program can you use to make these icons?
5. Posted by Intimprodukter on December 21, 2011
OMG! why haven't i thought about this idea since now!
6. Posted by Web designing in chennai on December 21, 2011