离子v2按钮文本对齐

Question

在我的离子v2应用程序中，我有几个按钮，里面有一个图标和一个文本。使用Ionic的v1，可以使用参数将按钮内的图标和文本对齐。

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

对于v2，我还没有找到任何参数，然后是＆＃39; icon-left＆＃39;，这在图标和文字之间只增加了一点间隙。无论如何，按钮的内容保持居中。

这是我在v2中的html代码：

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

我已删除了ngFor和点击功能，以便于阅读。是否可以轻松解决问题？

Answer 1

我们没有合法的＆＃34;使用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;
     }
}

Answer 2

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

我在android上有这个问题＆lt; V4.4