2014
Lynda
James Williamson
2:04
English

Icon fonts are a fast, effective way to feature scalable vector artwork on websites. James Williamson shows you how to properly deploy icon fonts on your own site in this short course. Learn how to find an icon font that's right for you and style it so it appears exactly the way you want. Then learn about deployment options that will make your icons accessible and display consistently across multiple browsers and devices. James also introduces advanced styling options such as animated and multicolored glyphs.
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.

Welcome
Introduction
How to use the exercise files
1. Using Icon Fonts
What is an icon font?
Finding icon fonts
Understanding encoding
2. Global Styling
@font-face syntax
Adding Data URI for icon fonts
Normalizing icon fonts
Improving rendering
3. Deployment Options
Working with Basic Latin encoding
Using generated content
Creating class-based solutions
Adding the data-icon attribute
Improving accessibility
4. Styling Icon Fonts
Basic icon styling
Vertically aligning icons
Changing icon states
Animating icons
Structuring multicolored glyphs
Positioning multicolored glyphs
Conclusion
Additional resources

Download File Size:328.33 MB

---