Home / The Lodge / The Big v10 Redesign Project / #015: Adding Icons to the Navigation with an Icon Font #015: Adding Icons to the Navigation with an Icon Font Author Chris Coyier 15 Comments Join the Conversation Published Sep 9, 2012 Updated Oct 5, 2015 ← Previous Video Next Video → Share this:TwitterFacebook monday.com helps you manage your projects. 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!