Join James Williamson for an in-depth discussion in this video Normalizing icon fonts, part of Deploying Icon Fonts for the Web.
…You never really know where you're going to need to use an icon font.…Some icons might appear inside of a paragraph, others might…appear inside of something like a heading or a list,…and you might use it in a stand alone element…like a div or some type of other black level element.…Well that type of flexibility is really one of the strengths of icon fonts.…But it also means that you have to be…aware of the apparent element that it's inside of.…You have to be aware of that apparent elements…styling that could cause your icons to display incorrectly.…
That's why it's a really good idea to do what we call normalizing our icon…styling by going ahead and setting explicit values…for things like font weight and font style.…And so, to demonstrate that, I'm going to use…the normalize HTM file, found in the 02_03 directory.…I'm just going to scroll down, I'm previewing it in the browser right now.…And I've got this particular icon used in three different places.…One is inside of a heading, another…is inside of a italicized paragraph, and another…
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