#015: Adding Icons to the Navigation with an Icon Font

(Updated on )

We start by tweaking the logo type a bit, but then jump into adding icons into the main nav. When we were designing the navigation in Photoshop (Video #007) we used the icon font Entypo. Now we’ll use it on the web as well.

We run the font through Font Squirrel @font-face generator which ensures we’ll get the font in all the formats we’ll need.

We used CSS3please to get the best/latest version of how to use @font-face.

We reference this post on CSS-Tricks about the currently-best HTML to use for icon fonts (best semantics, best accessibility). Essentially, it will be like this:

<a href="/" class="home">
  <span data-icon="k" aria-hidden="true"></span>
  Home
</a>

We had some weird issues with CodeKit, but nothing a little quitting and restarting couldn’t handle!