Join James Williamson for an in-depth discussion in this video What is an icon font?, part of Deploying Icon Fonts for the Web.
- View Offline
…Some of you watching this course might be curious about how icon fonts can help you…with your own projects even though you might…not be a 100% sure exactly what they are.…Well icon fonts are simply another way…of displaying icons in your applications and websites.…In the past this task has falling largely to image formats like GIF and PNG.…Although techniques like CSS Sprites have evolved to make…this a little bit more efficient, using images for icons…usually results in additional requests to the server, and image…quality is likely to suffer if the icon is scaled.…
To address this problem, designers have turned to, what is…actually a very old solution, and that would be fonts.…For as long as we've been building fonts we've been storing symbols inside of them.…You're probably pretty familiar with the example I'm showing you here.…This is the WingDings font, that has been around for a long, long time.…But with the increase in support for web fonts, it was actually inevitable that…once again we would start to look at serving symbols and icons through fonts.…
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
- Finding icon fonts
- Ensuring consistent styling
- Exploring class-based solutions for deployment
- Deploying with the data-icon attribute
- Aligning icons
- Animating icons
- Styling multicolored glyphs