Join James Williamson for an in-depth discussion in this video Adding the data-icon attribute, part of Deploying Icon Fonts for the Web.
- View Offline
…In the previous exercise, we were talking about ways that you…can build a more efficient class-based solution to deploying icon fonts.…Notice I didn't say efficient, I said more efficient.…And that's because doing a class-based approach…to deploying icon fonts means that you…have to create a class for every single individual icon that you want to deploy.…And not only is that not efficient, what…happens if your icon font changes, or somebody…comes in and brings in a new icon font, or modifies the encoding of the old one.…
Now all of a sudden your classes don't work any more and…you have a lot of updating and maintaining to do to your styles.…So, perhaps a more efficient way, to display icons with…icon fonts is through the use of the data-icon attribute.…Now, there's some of you out there that…have never heard of the data-icon attribute before, I…wouldn't be surprised, mainly because not too long…ago, some people just kind of made it up.…You see, in HTML5, we gain the ability to create these custom data attributes.…
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