Where developers come to connect, share, build and be inspired.


Analog Clock Icon Font for <time> elements


Decorate 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 elements to have a visual notation in a simple, progressive way using a @font-face 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 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 pseudo elements to place the icons, therefore, there is no extraneous HTML content present when the :before element is not supported. Graceful fallback to the contents of the element.

Sample markup:

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


  • 74c714225754481aabee8ab22408cd2d

    Very nice. Thanks

  • C740358b2cce341557a23ffb981aacf2

    Awesome tip :D

  • 98344e158361166ff5395d25416cf029

    Superb !

  • Headshot-cropped800

    There are open source "fancy" projects out there, now, I noticed. Timepiece.inostudio.de 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.

Add a comment