Deploying Icon Fonts for the Web
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.
- 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
- [Voiceover] Hi, I'm James Williamson, Senior Author at Lynda.com, and I wanna welcome you to Deploying Icon Fonts. Icon fonts are an increasingly popular way of displaying icons on websites in applications. In this course, I'm gonna cover some of the techniques that you can use, to deploy and style icon fonts for your own projects. We'll start with an overview of icon fonts, and how to find the one that's right for you. From there, we'll move on to discussing basic styling of icon fonts, and how to ensure that your icons are gonna look the way you want them to, across different browsers.
Next we'll examine some of the different deployment options for icon fonts that are largely based on how the icon font was constructed. Finally, we'll go a little deeper into styling options for icon fonts, starting with basic styling and then moving to more complex examples, including how to animate your icon fonts through CSS. I'll also show you how to use icon fonts to create multi-colored icons, that go beyond the basic mono-chromatic limitations of normal icon fonts. I love using icon fonts and I can't wait to show you some of the things that you can do with them in your own projects.
Design the Web: Using Symbols in SVG23,044 Views
Responsive Typography Techniques95,548 Views
Design the Web: Graphics and CSS Pseudo-Elements53,248 Views
Creating Icon Fonts for the Web68,963 Views
Design the Web: Creating and Protecting Email Links13,293 Views
Illustrator CC 2013 One-on-One: Fundamentals1,676,368 Views
Illustrator CC 2013 One-on-One: Mastery301,789 Views
iOS 8 App Development with Swift 1 Essential Training1,023,003 Views
Edge Animate Essential Training630,358 Views
Illustrator CC 2013 One-on-One: Advanced391,623 Views