Icon fonts are the next step forward in web design and optimization.
What is an Icon Font, anyway?
Simply put, an icon font is a font file filled with icons and characters or symbols (glyphs) instead of letters and numbers. Icon fonts are truly scalable vector graphics which are completely resolution independent. And, since icon fonts consist of one single font file vs. images there is only one HTTP request.
Improve Your Workflow
Generating sprites and manually positioning different sized images can be a time consuming endeavor for any developer. Using icon fonts not only will look great on any screen resolution or display, it saves time and hassle during the entire development process.
In addition, not only does it improve workflow, but using icon fonts replaces the need to render icons on a webpage using images.
Reasons to start using icon fonts, if you don’t already:
- Icon fonts are extremely lightweight compared to an image sprite since they are vector, infinitely scalable, completely resolution independent graphics.
- Only one HTTP request is required because it’s a single font file vs. images.
- You can easily style icon fonts using CSS, just like other fonts.
- They are responsive and will look great on any screen resolution or display – yes, even Retina!
- Especially useful on mobile devices where icons play a larger role.
- Browser support for IE 7 and 8
- 100% Accessible