Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A set of icons for displaying a visual ("analog") representation of time stamps.
JavaScript
Branch: master

Merge pull request #2 from jpsirois/patch-3

Fix Readme mailto href (J- Wow, that was dumb of me)
latest commit 26656b505d
@jhogue authored

README.md

PE-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:

Sample of the PE Clock font in action

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 us links to the icon font in use, and happy coding.

Credits and License

Open source coolness from Project Evolution ©2012

Thanks to:

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


Creative Commons License
PE Analog Clock icon font by Project Evolution is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Something went wrong with that request. Please try again.