Join James Williamson for an in-depth discussion in this video Animating icons, part of Deploying Icon Fonts for the Web.
- View Offline
…In this exercise, I want to take a look…at extending the styling of our icon fonts past…just sort of basic visual styling into something a…little bit more complex, like animating it through CSS.…A lot of icon sets have icons that are designed to animate.…Most notably, loader icons like the one you…are seeing here at the bottom of the page.…So what we're going to do is we're going to…animate our loader icon by making it spin.…And thus, simulate the loading of a page or element.…Or widget or something like that.…Now, I want to point out that as we are going through and styling…this, I want you to notice that…CSS animation support is pretty good right now.…
However, you do have to work hard sometime to…make sure that it works correctly across multiple browsers.…Okay so here we are in the same file within the code editor.…This the animate.htm.…I want to scroll down and show you guys kind of how the icon is being displayed.…It's right there in the paragraph.…And we're not doing anything different from the way we normally display our…
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