miniXFN Icon set & XFN CSS implementation
XFN (XHTML Friends Network) is a microformat which represents relationships between people with hyperlinks and the use of a simple HTML tag.
They can represent colleagues, contacts, sweethearts, friends and more!
Based on the XFN icon set by Wolfgang Bartelme I have created a small set of mini icons (9×10 pixels) to represent these links between people. I have also made a CSS file which shows the relevant icon when the correct XFN rel tag is present.
How to create an XFN link
XFN links are very simple to create, they simply list the relationships in a ‘rel’ tag in the anchor, for example:
<a href="http://blue-anvil.com" rel="me">Blue Anvil</a>
The above example show a link to my site, therefore marked as ‘me’ in the ‘rel’ tag. To create your own, you can use the official XFN creator which is a very nice, simple, tool.
My Icons
First off, the icons. As i said before, i based them on the icons by Wolfgang Bartelme found on the Microformats icons website.
Download the icons here. – Downloaded 885 times.
My mini-icons are free to use, just don’t claim them as your own, and a link would be nice 
My CSS
My CSS file, basically, looks for a present REL tag, then styles the link based on the present styles. It cascades, picking out the right icon depending on the rel tag.
It works with modern browsers that support CSS pattern matching.
Download the CSS file here. – Downloaded 785 times.
See it all working
I have set up a demo page showing the icons and css file, which you can view here.
I hope you find my icons prove useful!
Found this post useful? Why not buy me a coffee!
Mike Cherim says:
I may be wrong, Michael, but I think you’re missing a key part of using relational attributes: I’m pretty sure you have to link your document to a profile such as is done in WordPress.
<head profile="http://gmpg.org/xfn/11">I’m pretty without that the “rel” link attribute is meaningless.
Comment made on February 14, 2007 at 10:18 pm
Mike Jolley says:
your right i left that out, because i just focussed on the styling and icons, in a rush
Comment made on February 14, 2007 at 11:55 pm
Edmundo Filho says:
Cool Article! Do you use rubhub?
Comment made on February 15, 2007 at 2:02 am
Anthony Brewitt says:
Nice little icons, I have seen these being used on a few websites and famously the outgoing link one used as the front cover of CSS Mastery. I agree with the out going links and do think its a great idea, I sometimes worry we are overcomplicating things when we start adding icons on everything, saying that they do have their uses and if they help some users, why not!
Comment made on February 17, 2007 at 1:07 am
David Singleton says:
nice article!
Grat minds think alike eh? – I had a go at the same idea a while back (http://dsingleton.co.uk/archive/28/2006/09/12/)
Comment made on April 27, 2007 at 12:18 am