HTML and CSS Reference
In-Depth Information
Rather than using images or hardcoding your text characters into your HTML,
you'll create them on the fly using generated content:
ul li:nth-of-type(1) a:before {
: ;
}
ul li:nth-of-type(2) a:before {
: ;
}
ul li:nth-of-type(3) a:before {
: ;
}
ul li:nth-of-type(4) a:before {
: ;
}
This avoids the problem of polluting your markup with surplus characters.
However, it can be a bit fiddly trying to work out which text character corresponds
to which icon you want to use. You could install the font on your system and then
open a word processor and just type out characters until you find them, or open
the font in an app like Character Map or Font Book and pick them out of there.
It seems that they are mapped to intuitive characters in this case—“H” for
home, “i” for the information symbol, and so on—so hopefully other icon font
authors will follow suit and start to adhere to some kind of ad hoc conventions.
