About

What is/are “auticons”? Auticons is an icon font and CSS set that harnesses the awesome power of attribute selectors.

  • No CSS classes
  • No javascript
  • No extra markup

How about a quick example? The mailto: protocol defines a common type of <a> element: one that can open up email clients on the end user's system. Auticons finds any links that start with mailto: and places an indicative envelope shaped icon before them.


	[href^="mailto:"]:before {
		content: '\E007';
	}
				

The result

heydon@heydonworks.com

Just load up the Auticons CSS and links for secure pages, author pages, permalinks, your Twitter profile, PDFs, .doc files, JSON resources and many more are all “iconed up” automagically! That is, if your link elements are well-formed and semantic so… BE GOOD.

The Glyphs

There are currently just 25 27 glyphs, so please make suggestions to expand the icon font in the comments. Below are the glyphs for the current version. Hover on individual glyphs to see the attribute selectors they use in auticons.css.

Examples

Some further code examples to give you a better idea of how Auticons works.

Zipped archives

To indicate that Auticons can be downloaded as a .zip archive, a zip folder icon automatically appears. If the download was a gzipped .tar file instead, the same — equally indicative — icon would show up. As with many selectors in auticons.css, if you are using mod_rewrite the default example will not match and you'll have to tweak it.

auticons.css:

	
	[href$=".zip"]:before, 
	[href$=".gz"]:before {
		content: '\E004';
	}

The result:

Download Auticons

RSS

Does anyone use RSS anymore? I hope so! Regardless, Auticons will only put an RSS icon on a link if it connects with a feed. Talking of which, note that not just the .rss and rss.xml file extensions are supported. The /feed/ URL substring means that rewritten Wordpress feed URLs are covered too.

auticons.css:

	
	[href$=".rss"]:before, 
	[href$="rss.xml"]:before, 
	[href*="/feed/"]:before,
	[href*="/rss/"]:before {
		content: '\E018';
	}

The result:

BBC News UK feed

New Window

If the link opens a new tab/window, the user should get some sort of warning! Auticons takes care of this with the following. It is the only rule that affects :after pseudo-content, so can be used in combination with other rules.

auticons.css:

	
	[target="_blank"]:after {
		content:'\E002';
	}
	

The result:

HeydonWorks homepage

Secure Page

Secure pages start with https:.

auticons.css:

	
	[href^="https:"]:before {
		content:'\E017';
	}
	

The result:

Make secure payments.

Author Page

The author link relation is used to connect to author bio pages. It's most notoriously used by Google to enhance your SERP listing for an article with your Google+ avatar. Auticons provides a studious looking little face.

auticons.css:

	
	[rel="author"]:before,
	[href*="rel=author"] {
		content: '\E006';
	}
	

The result:

.

Previous And Next

A pair of useful link relations are prev and next. Championed by Wordpress and implemented by Google, these semantic attributes help authors be clear about how pages and part pages link together in a continuum.

auticons.css:

	
	[rel="prev"]:before {
		content: '\E009';
		padding-right: 1em;
	}

	[rel="next"]:after {
		content: '\E00A';
		padding-left: 1em;
	}
	

The result:

   

Telephone

The tel: protocol is equivalent to mailto: and is used to manufacture <a> elements that cue up telephone numbers to call on smart phones. Well supported but underused. Very neat.

auticons.css:

	
	[href^="tel:"]:before {
		content: '\E008';
	}

The result:

0800 000 000

View-source protocol

The final protocol covered in Auticons is the view-source: protocol. Supported by Firefox and Chrome (at least), view-source: can be prepended to any href to… well, the clue's in the way it's named: view the source of that URL. Click the demo link to see the source of my blog's homepage.

auticons.css:

	
	[href^="view-source:"]:before {
		content: '\E00D';
	}

The result:

HeydonWorks source

Images

Standard image file types are supported by Auticons.

auticons.css:

	
	[href$=".jpg"]:before, 
	[href$=".jpeg"]:before, 
	[href$=".png"]:before, 
	[href$=".gif"]:before {
		content: '\E005';
	}

The result:

My other icon font, Heydings

PDFs

Nobody likes opening a web page only to find it's a bloody PDF. With Auticons, a polite warning is provided via an icon emblazoned with "PDF". By default, all hrefs that include ".pdf" are targeted. Naturally, if you are using mod_rewrite, to change or elliminate file extensions, you'll have to modify this rule.

auticons.css:

	
	[href*=".pdf"]:before {
		content: '\E000';
	}

The result:

Web Design For Dummies

Documents

As with PDF, but for files of type .doc. Again, if you are using mod_rewrite, change the selector accordingly. Perhaps documents on your site follow a pattern that includes /docs/ in the URL. In which case, use the selector [href*="/docs/"]. Depending on your setup, the browser will either try to display the document or prompt you to download it.

auticons.css:

	
	[href*=".doc"]:before {
		content: '\E020';
	}

The result:

Someone's CSS guidelines

Text files

Another filetype one, this time for text files. These can be either .txt or .md (markdown) as commonly used in Github.

auticons.css:

	
	[href$=".txt"]:before, 
	[href$=".md"]:before {
		content: '\E00C';
	}

The result:

The robots.txt file

Popular sites

Auticons appreciates that you will often be linking to profiles or media on some major sites ie. Twitter, Youtube, Github, LinkedIn, Google+ and Facebook. Some icons have been provided for these cases.

auticons.css:

	
	/* twitter */

	[href*="twitter.com/"]:before {
		content: '\E013';
	}

	/* facebook */

	[href*="facebook.com/"]:before {
		content: '\E010';
	}

	/* linkedin */

	[href*="linkedin.com/"]:before {
		content: '\E011';
	}

	/* google+ */

	[href*="plus.google.com/"]:before {
		content: '\E012';
	}

	/* youtube */

	[href*="youtube.com/"]:before,
	[href*="youtu.be/"]:before {
		content: '\E014';
	}

	/* github */

	[href*="github.com/"]:before,
	[href*="youtu.be/"]:before {
		content: '\E023';
	}

The result:

HeydonWorks on Twitter

CSS's facebook page

Paul Irish getting electrocuted

My (barely used) Google+

Some page on LinkedIn

My Github

aria-pressed

WAI-ARIA provides a mechanism whereby one can indicate — in an accessible way — whether toggle buttons are in a pressed or unpressed state. Buttons and links with role="button" are applicable and covered here. The boxy button styles shown are not part of auticons.css. Styling what a "button" looks like is up to you. Auticons takes care of the pressed states by showing a switch in either the on or off position. Note that <a> elements only receive the icon if they have role="button" as well as an aria-pressed value. These two attributes should be used hand-in-hand.

auticons.css:

	
	[role="button"][aria-pressed="true"], button[aria-pressed="true"] {
		content: '\E021';
	}

	[role="button"][aria-pressed="false"], button[aria-pressed="false"] {
		content: '\E022';
	}

The result:

Toggle (not pressed)

Toggle (pressed)

Javascript

Us coders like to link to javascript files from time to time, usually just to show off. JSON files are also covered in this rule, in case you wanted to link directly to a data resource.

auticons.css:

	
	[href$=".js"]:before, 
	[href*="/js/"]:before, 
	[href*="/javascript/"]:before, 
	[href$=".json"]:before {
		content: '\E00E';
	}

The result:

My jQuery file

I don't need your filthy drug money. I invite you to donate a little of it to the mental health charity MIND instead:

MIND's donation page

Comments