Last Updated: February 25, 2016
·
7.684K
· artinruins

Analog Clock Icon Font for <time> elements

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:
Sample of the Analog Icon Clock font

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>

4 Responses
Add your response

Very nice. Thanks

over 1 year ago ·

Awesome tip :D

over 1 year ago ·

Superb !

over 1 year ago ·

There are open source "fancy" projects out there, now, I noticed. <a href="http://timepiece.inostudio.de">Timepiece.inostudio.de</a> is one with a few fancier clock faces. Not suitable for small sizes, but they are pretty cool still if someone is looking for something to use for a larger display size.

over 1 year ago ·