While reading a recent article about Semantic CSS With Intelligent Selectors I discovered an awesome icon font set by Heydon Pickering called “Auticons”. Auticons allows users to insert awesome icons into their page using only attribute selectors. There is no need for CSS classes, Javascript, or any other extra markup.
For example, When someone begins an anchor’s href tag with “mailto:”, this allows the user to open up their systems email client. Auticons.css searches for links that start with “mailto:” and inserts the appropriate icon before them. Check it out:
[href^="mailto:"]:before {
Results in:
content: '\E007';
}
Since this icon set is actually a font, they are styled exactly like the text that they precede including size, color, weight, etc.