andrewheins
12/14/2011 - 3:26 PM

Terse Font Icons

Terse Font Icons

<!-- Assuming "+" is your font's Add icon -->

<a data-icon="+" href="...">
  Add
</a>

<!-- Assuming "D" is your font's Delete icon -->

<span data-icon="D">
  Delete
</span>
a[data-icon]:before,
span[data-icon]:before {
  font-family: 'Icon Font Here';
  content: attr(data-icon);
}

/*

  This would also work, but other web developers might
  yell at you about "performance" which may/not matter:

*/

*[data-icon]:before {
  font-family: 'Icon Font Here';
  content: attr(data-icon);
}