Join James Williamson for an in-depth discussion in this video Creating class-based solutions, part of Deploying Icon Fonts for the Web.
- View Offline
…There are a lot of designers and systems out there that use a…class based approach to displaying icon fonts,…and there's certainly nothing wrong with that.…Just like any other technique, they have a…class-based approach has it's pros and it's cons.…The cons are it's really tedious because you pretty much have to…create an individual class for every single icon in your font, and…if you have a large font like the junky mobile one has…got over 93 glyphs inside of it, that's a lot of classes.…Of course the benefit of that is that you can start to use…classes that are intelligent, and are…semantically named, meaning they actually mean something.…
So if you have a Twitter icon, for…example, Twitter could be part of your class name.…And it's really easy to say, hey, I need the Twitter…icon, so I'm just going to do icon dash Twitter, and it's done.…So, there are a few things that you need to think…about if you're going to establish some type of a class-based deployment.…The first is you want to make sure you're not needlessly repeating code.…
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