HTML and CSS Reference
In-Depth Information
HTML
data-
ATTRIBUTES
FOR MORE
EFFICIENT ICON CSS
When using the web font icon solution, you'll need to include a separate
ruleset for each icon. A way to get around this and lessen the amount of
code is to use the new HTML5
data-
attribute to store your text characters,
like this:
<li><a href=”#” data-icon=”H”>Home</a></li>
Yo u c a n p u t a ny t h i n g yo u l i like a ft e r t h e
data-
part, and store whatever data
you like in these custom attributes. Then you'll have your text characters
stored in your
data-icon
attributes; you can put them all on the page using
only a single CSS ruleset and eliminate the other four that were present
before:
ul a:before {
: ;
.
}
Yo u c a in s e e my i m p l e m e nt at i o in i in w e b - fo nt- i co in s - d at a - at t r i b u t e s. ht m l .
