Join James Williamson for an in-depth discussion in this video Vertically aligning icons, part of Deploying Icon Fonts for the Web.
- View Offline
…One of the most difficult aspects of working with icon fonts,…is getting the icons vertically aligned with other elements, like text.…This is largely due to how icon fonts are created.…Remember, they're fonts.…So, each icon has to be drawn inside,in in the individual glyphs.…Em box.…Now an Em box is essentially a box that…defines the width and the height of the character.…And there are other measurements inside of it as well.…Like ascenders and descenders and baselines.…
And essentially, when a letter is drawn inside of that Em box, it defines…where it sits along the baseline, how far up it goes, that sort of thing.…So when an icon is drawn, or positioned inside of it, it's really up…to the designer to determine exactly how big it's going to be within that Em box.…And where it sits in relation to things like the baseline.…You know, some icons are placed directly on the baseline.…Some fill up the entire inbox.…It's really up to the designer.…So when you use an icon font, you're not really 100% sure the first time you…
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