Auticons: Using Attribute Selectors to Generate Icons

Auticons

Automatic icon font set

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 {
content: '\E007';
}
Results in:

auticon email

 

Since this icon set is actually a font, they are styled exactly like the text that they precede including size, color, weight, etc.

Download

Your 2 Cents

Scroll To Top