Join James Williamson for an in-depth discussion in this video Positioning multicolored glyphs, part of Deploying Icon Fonts for the Web.
- View Offline
…We're almost finished with our multicolored icons.…In our last exercise, we structured the HTML for them.…So in this exercise, we'll concentrate on the styles.…Now I'm going to go into my code editor.…And I have the multicolor.htm, open from the 04_06 directory.…Now, we're picking up right where we left off.…So, if you have the previous file open.…And you just want to keep working on that, that's fine.…Just as a refresher, to let you guys know…kind of, what kind of structure we're dealing with here.…
We've got two spans, one is nested inside of the other.…The outside span has two classes applied to it.…One is multi.…To let us know that it is a multicolored icon.…And the other one identifies which icon it is.…In the case of the one that we're going to be styling, that would be maps.…Alright, I'm going to open up my CSS file, which is the base.css.…And I'm going to scroll all the way down towards the bottom.…Where I'll find my icon font styles.…Now, as I get towards the bottom, I've got…some commented styles down here for a multi-color colors.…
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