Secret Life of the Haverford Website: Icons

We want the Haverford College web experience to be as robust as possible, and photos, news stories and other content helps distinguish our site and the community it represents.

But there are other, less apparent aspects of the site that help make it as captivating as it is useful. One example, recently introduced, are icons which, it turns out, are actually a font!   They even have a great name, Font Awesome.

Why a font?  There are 2 major reasons:

  1. Scalability: Time was, icons came in many different sizes and using them meant either lots of little images or one big icon “set” in a single image that required web wizardry in order to display the correct icon.  With a font-based solution, the icons can be scaled and colored with simple CSS and look great on any screen.
  2. Speed:  The older solution required the user to download a lot of data.  Now, just one download renders up to 302 icons.  That’s a lot!

Here are some samples:

Rocket Ship

Book

Envelope

User

Magic

This Way

We have used them in various places around the site including the homepage, the quick access panel, and nearly anywhere some visual feedback will help.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>