離子2 - 如何使圖標和文字在兩行上的離子按鈕？

Question

現狀：

在我的離子2應用程序中，我需要兩行上的菜單按鈕：圖標和文本。

問題是，不知何故離子按鈕指令強制按鈕在一行上。

我需要離子按鈕指令來確保按鈕始終具有正確的格式和定位響應。 我只需要該按鈕在兩行上。

這是我嘗試的HTML和CSS：

的HTML：

<ion-header> 
    <ion-navbar> 
     <button ion-button menuToggle="left" start> 
     <ion-icon name="menu"></ion-icon> <br /> 
     <p class="menuSubTitle">MENU</p> 
    </button> 
    <ion-title> 
     HomePage 
    </ion-title> 
     <button ion-button menuToggle="right" end> 
     <ion-icon name="person"></ion-icon> <br /> 
     <p lass="menuSubTitle">LOGIN</p> 
    </button> 
    </ion-navbar> 
</ion-header> 

的CSS：

.menuSubTitle { 

     font-size: 0.6em; 
     float:left; 
     display: block; 
     clear: both; 
    } 

問題：

如何在兩條線上製作離子按鈕？

謝謝！

Answer 1

你正在寫文章。它需要稍作修改才能工作。

這裏是我的標記：

<button ion-button block color="menu-o"> 
    <div> 
     <ion-icon name="flash"></ion-icon> 
     <label>Flash</label> 
    </div> 
</button> 

按鈕內部的內格是的伎倆。此標記唯一需要的是設置label element to display block

由於<p>已經是塊級元素。它可能只是按原樣工作。