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

51

Analog Clock Icon Font for <time> elements

3328 views

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> 
        4:09pm
    </time>
</div>

Comments

  • Blank-mugshot
    skopp

    Very nice. Thanks

  • Blank-mugshot
    gnclmorais

    Awesome tip :D

  • Blank-mugshot
    mwesten

    Superb !

  • Headshot-cropped800
    pe1999

    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