miniXFN Icon set & XFN CSS implementation

February 14, 2007 | Published in: Web design & development | Tags: , , , 5

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 425 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 650 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!

Related Entries

Popular Entries

5 Responses to “miniXFN Icon set & XFN CSS implementation”

RSS feed for comments on this post.

  • 1 - Mike Cherim says: Reply to this comment

    Gravatar

    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

  • 2 - Mike Jolley says: Reply to this comment

    Gravatar

    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

  • 3 - Edmundo Filho says: Reply to this comment

    Gravatar

    Cool Article! Do you use rubhub?

    Comment made on February 15, 2007 at 2:02 am

  • 4 - Anthony Brewitt says: Reply to this comment

    Gravatar

    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

  • 5 - David Singleton says: Reply to this comment

    Gravatar

    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

About this site

Blue Anvil is the online web design journal & portfolio of , a web designer from Norfolk, England. Read More »
ThemeSlice

  • Featured work - More

    • Beefjack
    • Integrity
    • theotaku.com
    • Manic Melon

  • Latest Tweet - More

    • Dropped yoghurt all down my pyjamas. Bugger. Working in my boxers. Ill get dressed some time. Soon.

  • Out of the blue - More

    • Wordpress 2.8 Memory Usage

      With the release of wordpress 2.8 some people are experiencing out of memory php errors along the lines of:

      Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 228968 bytes)

      You may also be seeing pages fail to load fully (for example the wordpress admin dashboard) if php error messages are hidden. I’ve already had one case where we thought certain plugins were to blame but in fact it was just out of memory. A possible fix (which worked in the previously mentioned case) is to add:

      @ini_set('memory_limit','64M');

      to your wp-config file. Has anyone else encoutered this error?

    • jQuery Curvy Corners 1.x and 2.x updated and moved to Google Code

      I have updated the jQuery Curvy Corners plugins (both versions) with jQuery 1.3.2 support and other enhancements. The beta 2 version is looking good and is working in all version of IE, Opera, and Firefox (as far as I can tell).

      You can grab the latest files from Google Code here. Enjoy.

    • I’m too nice: Wordpress Download Monitor plugin page add-on now included with Download Monitor version 3.1.

      It was going to be a paid add-on, but today I had a change of heart and bundled it with the newest version of download monitor. The add-on lets you make a download page using a shortcode; it lists your downloads/categories with full sorting, pagination, and search functionality. Not bad eh? See the documentation topic to see full instructions for usage, or see my download page to see it in action.

      And if you use it, please consider making a donation to ensure the continued development of the plugin!

    • 2 Announcements: New Support forum, and feedback wanted for new download page add-on

      First, I’ve implemented a support forum to Blue Anvil mainly for plugin support and ideas which can be found here. Hopefully this will make supporting my plugins easier. Feel free to add to the discussions (there is also a general web design forum too).

      Secondly, I’ve added a demo of the new download page add-on I’m making for Download Monitor. This will be a paid add-on and it would be cool to get any feedback or suggestions from anyone who would like such a feature. My download page is here. Please leave feedback on the forum or in the comments.