Foundation5 top bar icons and text

Question

I am trying to achieve an iOS kind of look on a Zurb' Foundation 5 top menubar. I would like to have a icon font icon on top and the matching menu description below. Something that would look like this:

This is what I got now:

Having an icon first and following text is trivial with icon fonts:

<div class="contain-to-grid">
<nav class="top-bar" data-topbar> 
<ul class="title-area">
<li class="name">
<h1><a href="#">Site name</a></h1>
</li>
</ul>

<section class="top-bar-section">
    <ul>
     <li class="show-for-medium-up" id="people-menu" data-tooltip data-options="disable_for_touch:true" title="People"><a href="#row1"><i class="fi-results-demographics"></i> <span class="menu-heading"> option 1 </span></a></li>

     <li id="assets-menu" data-tooltip data-options="disable_for_touch:true" title="Assets"><a href="#row2"><i class="fi-euro"></i> <span class="menu-heading"> option 2 </a></li>

     <li id="documents-menu" data-tooltip data-options="disable_for_touch:true" title="Documents"><a href="#row3"><i class="fi-page-edit"></i> option 3 </a></li>     

      <li id="services-menu" data-tooltip data-options="disable_for_touch:true" title="Services"><a href="#row4"><i class="fi-info"></i> Option4 </a></li>

      <li class="divider"></li>

     <li id="login-menu" data-tooltip data-options="disable_for_touch:true" title="Sign in"><a href="#"><i class="fi-key"></i> </a></li>       

     <li id="logout-menu" data-tooltip data-options="disable_for_touch:true" title="Sign out"><a href="#">Example login <i class="icon-bell color6"></i> </a></li>

   </ul>
 </section>

Adding a < br > before the span does not help as it breaks the top bar even if span has zero margin/padding in CSS.

How can I get the icon and text stack up nicely above each other?

Answer 1

You'll need to override a few default Foundation styles, but it's definitely possible.

Give these styles a try:

.top-bar ul>li a:not(.button) {
  line-height: 1em;
  padding-top: 8px;
}

.top-bar ul>li a i {
  display: block;
  height: 16px;
  margin: auto 0;
  line-height: 1em;
  text-align: center;
}

You'll likely need to adjust both the padding-top, line-height, and icon height values to match your particular design.