Decorate <time> elements with a little clock icon that changes according to the time being displayed

GitHub project here:
https://github.com/proevo/PE-Analog-Clock-icon-font

And a sample of what I am talking about:

The Analog Clock icon set allows <time></code> elements to have a visual notation in a simple, progressive way using a @font-face</code> to deliver a custom font for the clock face. The icon is therefore scalable and can be styled with CSS to match most site designs.

The required HTML can be implemented server-side in any application to output the desired icons. Optionally, for users that do not have server-side access, a javascript plug-in can sniff out <time></code> elements and add the HTML necessary for the icon set. Both options are documented in the sample and can be modified to fit specific situations.

The CSS uses :before</code> pseudo elements to place the icons, therefore, there is no extraneous HTML content present when the :before</code> element is not supported. Graceful fallback to the contents of the <time></code> element.

Sample markup:

<div class="timestamp">
    <time datetime="2013-02-20 4:09:00">
        <span class="hour-4"><span class="minute-09"></span></span> 
        4:09pm
    </time>
</div>