基金会5顶部栏图标和文本

Question

我正试图在Zurb上实现iOS的外观。基金会5顶级菜单栏。我想在顶部有一个图标字体图标和下面的匹配菜单说明。看起来像这样的东西：

这就是我现在所得到的：

首先使用图标，然后使用图标字体显示以下文字：

<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>

 

添加＆lt; br＆gt;在跨度没有帮助之前，即使span在CSS中没有边距/填充，它也会打破顶部栏。

如何让图标和文字叠加在彼此之上？

Answer 1

您需要覆盖一些默认的Foundation样式，但这绝对是可能的。

尝试使用这些样式：

.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;
}

您可能需要同时调整padding-top，line-height和图标height值，以符合您的特定设计。