離子v2按鈕文本對齊

Question

在我的離子v2應用程序中，我有幾個按鈕，裏面有一個圖標和一個文本。使用Ionic v1可以將圖標和按鈕內的文本與參數對齊。

<a class="item item-icon-left item-assertive"> 
    <i class="icon ion-gear"></i> 
    SomeTextForExample 
</a> 

對於v2我還沒有找到任何參數，然後'圖標左'，它只增加了圖標和文本之間的一點點差距。無論如何，按鈕停留的內容居中。

這裏是從V2我的html代碼：

<button ion-button block icon-left color="danger"> 
    <ion-icon name="car"></ion-icon> 
    TextFoo 
</button> 

我已經去除了ngFor和更容易閱讀的點擊功能。任何可能的簡單解決方案？

Answer 1

<button ion-button block icon-left color="danger"> 
    <ion-icon name="car"></ion-icon> 
    TextFoo 
</button> 

這應該工作。只要確保您在名稱屬性<ion-icon>'s中輸入了有效的名稱即可。例如：<ion-icon name="star"></ion-icon>

Answer 2

我對Android的< V4.4這個問題

Answer 3

至於我們沒有一個「合法」的方式與item-end或icon-left我們可以使用一些CSS的按鈕來解決這個問題：

<button ion-button block icon-left color="danger" class="btn-align"> 
    <ion-icon name="car"></ion-icon> 
    TextFoo 
</button> 

和類是

.btn-align { 
    .button-inner { /*< --- this class added automatically */ 
     justify-content: flex-start; 
    } 
}