public
Last active

Terse Font Icons

  • Download Gist
data_icon.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
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);
}
data_icon.html
HTML
1 2 3 4 5 6 7 8 9 10 11
<!-- 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>

Why not just use this without the "*"?

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

If you want to save one byte by not having it in the stylesheet, go for it.

As far as browsers are concerned, it probably wouldn't matter either way.

I just had the star selector there for proper code highlighting.

Neither TextMate, nor Sublime Text 2, acknowledge attribute selectors without a preceding tag (or *).


TextMate screenshot:
http://cl.ly/1f333U2G3d2O3U0X2E2p

Sublime Text 2 screenshot:
http://cl.ly/1V3G1f3W132h0r3m0R0c

Since browsers parse CSS selectors from right to left, I understand that it won't make a huge difference. Cause in both cases the browser will look for the attribute in all elements anyway.

I know about the highlight issue. I just thought you might have some other reason other than saving bytes or performance, that's why I asked.

Nope, no good reason, really. Just a cut-and-paste from my text editor. :)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.