Apple Celebrates 30 Years Of Mac With Icon Fonts

To celebrate the Macintosh’s 30th Anniversary yesterday, Apple created a beautifully crafted promotional video and interactive web design on its website which (if you haven’t already) you can head over and check out.
The interactive site design, tone and general art direction is very well executed and quite deservedly, a respectable tribute to the Mac’s various achievements over the past 30 years.
Web design like this comes around once in a blue moon, so what better way to learn a few things, than from the ‘masters’ themselves. Once I was done soaking up all the Apple UX goodness the site has to offer, I was quick to start inspecting all the back-end – which includes a set of iOS 7 style icons of every mac ever made.

Luckily Apple had minified the entire CSS doc, but I noticed that the icons were actually icon fonts, rather than images – which means they’re in Vector format! After decompressing the CSS, it was relatively straight forward to find the URL of the icon source – which reads as follows :

font-family: 'mac-icons';
src: url('www.apple.com/v/30-years/a/fonts/mac-icons/mac-icon-standard.eot');
src: url('www.apple.com/v/30-years/a/fonts/mac-icons/mac-icon-standard.eot?#iefix') format('embedded-opentype'),
url('www.apple.com/v/30-years/a/fonts/mac-icons/mac-icon-standard.svg#mac-icon-standard') format('svg'),
url('www.apple.com/v/30-years/a/fonts/mac-icons/mac-icon-standard.woff') format('woff'),
url('www.apple.com/v/30-years/a/fonts/mac-icons/mac-icon-standard.ttf') format('truetype');

font-family: 'mac-icons-simple';
src: url('www.apple.com/v/30-years/a/fonts/mac-icons-simple/mac-icon-simple.eot');
src: url('www.apple.com/v/30-years/a/fonts/mac-icons-simple/mac-icon-simple.eot?#iefix') format('embedded-opentype'),
url('www.apple.com/v/30-years/a/fonts/mac-icons-simple/mac-icon-simple.svg#mac-icon-simple') format('svg'),
url('www.apple.com/v/30-years/a/fonts/mac-icons-simple/mac-icon-simple.woff') format('woff'),
url('www.apple.com/v/30-years/a/fonts/mac-icons-simple/mac-icon-simple.ttf') format('truetype');

---

As you can see, the icons are setup as a typical icon font would be – in various formats, including SVG. Unfortunately, their data has been encoded into seemingly arbitrary unicode characters, which makes it very difficult to use: