Join James Williamson for an in-depth discussion in this video Using generated content, part of Deploying Icon Fonts for the Web.
…Having to add a letter or something like an HTML character entity to…your page, in order to get your icons to display, is actually pretty inefficient.…It also places needless content in the page itself, and that can…be a problem for things like screen readers and other assistive devices.…So, to avoid having to add content to the page to get your icons…to show up, you can actually use…CSS-generated content to help display your icons.…Generated content uses the before and after pseudo selectors to inject…content, either before or after the…content of whatever element you're targeting.…
And that means you can do something like, you could…have an empty span and then inject the icon inside…of it or you can take something like an existing…paragraph and place an icon before or after its content.…So, that's pretty cool.…Let's take a look at how this works, and the first thing I want to do is just go…over some of the syntax of it for those of you who might not be familiar with it, so.…We're looking in the browser right now…
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