Using generated content


show more Using generated content provides you with in-depth training on Web. Taught by James Williamson as part of the Deploying Icon Fonts for the Web show less
please wait ...

Using generated content

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 looki...

Using generated content
Video duration: 5m 31s 2h 4m Intermediate

Viewers:

Using generated content provides you with in-depth training on Web. Taught by James Williamson as part of the Deploying Icon Fonts for the Web

Subject:
Web
Author:
please wait ...