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!