Foundation5頂部欄圖標和文字

Question

我正試圖在Zurb'Foundation 5頂部菜單欄上實現iOS類型的外觀。我想在上面有一個圖標字體圖標和下面的匹配菜單說明。東西會看起來像這樣：

這是我現在得到：

首先有一個圖標，下面的文字是瑣碎圖標字體：

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

添加一個< br>在跨度不起作用，因爲即使跨度在CSS中具有零邊距/填充，它也會打斷頂欄。

我怎樣才能讓圖標和文字堆疊在彼此之上？

Answer 1

您需要重寫一些默認的基礎樣式，但它絕對有可能。

給這些樣式的嘗試：

.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值，以滿足具體的設計。