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!
I think there is a missing screen cast, it does not show how to setup v10.whatup so the fonts load
We set that up in Video #017.
Thanks Chris, enjoying the screencasts!
By the way I ran into this yesterday while checking out Entypo… I’m sure it could come in handy Entypo character map
VIMEO!!!!!
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.
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??
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?
I slept on it and the next day it was resolved, i have no idea how :)
Hi, How did you do the hovering styles and everything. I missed it. Or it isn’t there. Please let me know.
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!
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.
I see,Thank you for your time of explaining for me
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
got it to work using the character mapping from entypo.com :P