Deploying Icon Fonts for the Web

with James Williamson
please wait ...
Deploying Icon Fonts for the Web
Video duration: 0s 2h 4m Intermediate


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.

Topics include:
  • 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, 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.

please wait ...