Quantcast
Channel: Blue Anvil Journal » css
Viewing all articles
Browse latest Browse all 9

miniXFN Icon set & XFN CSS implementation

$
0
0

XML mini Icons

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

Mini XFN 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!


Viewing all articles
Browse latest Browse all 9

Trending Articles