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 915 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 798 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!