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!

Comments

  1. william
    Permalink to comment#

    I think there is a missing screen cast, it does not show how to setup v10.whatup so the fonts load

  2. Seth Hall
    Permalink to comment#

    VIMEO!!!!!

  3. Dean Birkett
    Permalink to comment#

    Hah, Rodrigo I was just searching for the Entypo character map and was going to post it too… I knew I should have read the comments first.

    There’s other icon sets out there of course, and I know Chris has already posted about Icomoon. I really recommend that if you need to make your own sets.

  4. marinade
    Permalink to comment#

    I have a problem that in my main navigation the icon for the pick and hammer displays the icon for the musical note instead. Elsewhere, however, this problem does not exist. So just in the main nav the icon associations are not corresponding to the icons??

    • marinade
      Permalink to comment#

      IN IE v8 and firefox the pick and hammer is displaying properly but not in Chrome Version 22.0.1229.94 m. The home icon as per entypo character map(⌂) does not work in chrome also but is working in firefox and IE8. However i used Daniel Bruce’s dated character map version of the home icon and it worked in chrome (ï) but not in the other two browsers. Any ideas?

    • marinade
      Permalink to comment#

      I slept on it and the next day it was resolved, i have no idea how :)

  5. hassan8311
    Permalink to comment#

    Hi, How did you do the hovering styles and everything. I missed it. Or it isn’t there. Please let me know.

  6. blwoosky
    Permalink to comment#

    hi chris,
    in this video the font-size for the icon was so big ,but in the live site,it inherit the “.main-nav a”,but it still work ,why? I am confused!

    • Chris Coyier
      Permalink to comment#

      In this series we were using Entypo. Entypo is nice, but the icons were super tiny for whatever reason. I had it on my list for a long time to go back and load only a small set of icons instead of the whole Entypo set. I finally got around to it, making a custom set on http://icomoon.io/ When I used that set, the icons were of normal size, so I left the font-size alone.

    • blwoosky
      Permalink to comment#

      I see,Thank you for your time of explaining for me

  7. Kyle Bradley
    Permalink to comment#

    im having a lot of trouble with the entypo font stuff. I followed what you were doing and went onto font squirrel and the test/demo file that you download was just a normal font.

    Im not sure why its not working but its showing up as normal font, not even registering that i changed the @include font-stack-brand to font-stack-icon

    • Kyle Bradley
      Permalink to comment#

      got it to work using the character mapping from entypo.com :P

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.