Join James Williamson for an in-depth discussion in this video Changing icon states, part of Deploying Icon Fonts for the Web.
- View Offline
…Often, icon fonts will have icons that represent…the various states of UI elements or widgets.…For example, the chunky mobile font that we've been using throughout our course…has several sets of icons that are designed to indicate UI state of elements.…For example, we have the battery here that indicates the charger of the battery.…We have Wi-Fi and signal strength.…And right down here we've got the icons that we're going to…use in our example which is the state of the volume.…So mute all the way to, to loud.…
Well, you know, one of the things that we have to think about.…When we start trying to display the states of various UI elements with these icons is…how's that going to work with the existing…deployment strategy that we've got for our icons.…What I mean by that is it's really common when people are.…Working with UI elements to use certain…frameworks or have certain structures built in.…It's really incompatible with the way you're already displaying your icons.…Now, I'm not talking about using things like the hover pseudo class selector.…
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