Analog-Clock-icon-font

A set of icons for displaying a visual ("analog") representation of time stamps.

The Analog Clock icon set allows <time> 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 <time> 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 <time> element.

Supports:

• Military time
• Overlapping digit notations: hour-00, hour-24, minute-00, minute-60
• Single digit hour values: hour-01 as well as hour-1

Sample

Since GitHub readme does not support @font-face, here is a sample image of what the icon font looks like with very little CSS applied to it:

How it Works

The font file contains glyphs for hours and minutes. The glyphs for the hours contains the circle outline as well. To cut down on the number of glyphs needed for minutes, the font contains a glyph for every third minute (3, 6, 9, 12, 15, etc...) which hits the quarter hours perfectly. We also decided that at most sizes, a difference of three minutes is all most people will recognize. For browsers that support CSS3 for transform: rotate() every position for the minute hand is represented.

The <span> for the minute hand is nested inside of the hour. The hour has position: relative while the minute has position: absolute. In this way, they can overlap each other to create a clock face and represent many different combinations of hour and minute.

More information and samples in the index.htm file.

Browser Support

Browsers need to support @font-face as well as :before pseudo-elements. This font and CSS has been tested in:

Windows browsers

• IE 8 and above
• Firefox 3.6 and above
• Safari 4.0 and above
• Chrome 14.0 and above
• Opera 11.1 and above

Mac browsers (Snow Leopard)

• Firefox 3.6 and above
• Safari 4.0 and above
• Chrome 14.0 and above
• Opera 11.1 and above

iOS

• iPhone 4S (iOS 5.1) and above

Android

• Android 4.0.3 and above on most devices

Show us what you’ve got!

Send me a link to the icon font in use, and happy coding.

Credits and License

Open source coolness from Highchair designahus ©2012–2016

Thanks to:

J. Hogue (me!) for clock face design and concept
James Re for jQuery inspiration
JSfiddle.net
Ray Schamp and Peter Landry for technical support
Keyamoon for the IcoMoon.io service

---

Analog Clock icon font by Highchair designhaus is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.