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. User Avatar
    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. User Avatar
    Seth Hall
    Permalink to comment#

    VIMEO!!!!!

  3. User Avatar
    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. User Avatar
    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??

    • User Avatar
      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?

    • User Avatar
      marinade
      Permalink to comment#

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

  5. User Avatar
    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. User Avatar
    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!

    • User Avatar
      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.

    • User Avatar
      blwoosky
      Permalink to comment#

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

  7. User Avatar
    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

    • User Avatar
      Kyle Bradley
      Permalink to comment#

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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag