Help W/ Creating Nav Bar W/ Webfont Icons and 2 styles of text.

[reflectdesigntime]

Hi, I am trying to wrap my head around how I would create a header navigation bar I have in mind. I need each link to start out with a large webfont icon I created. Aligned to the left I need large text (the name of the link) and smaller text (description of the link) stacked on top of each other. I have a pic of what I’m trying to do you can look at on flickr here, http://www.flickr.com/photos/joshlatham/12211167063/

I’ve created my web dingbat and have it working on my site. My only problem is I don’t know how to align all of these things perfectly. Can anyone suggest how this should be done? I only have a beginners understanding of css. I have created a basic nav bar but this is beyond my grasp.

[Paulie_D]

Here’s a couple of ways:

Codepen: http://codepen.io/Paulie-D/pen/BiaIH is a little flaky for me at the moment.

JSFiddle: http://jsfiddle.net/b7T66/4/ just in case.

[Author]

Posts