Ionic 2 - как сделать ion-кнопку с иконкой и текстом на двух строках?

СИТУАЦИЯ :

В моем приложении Ionic 2 мне нужно, чтобы кнопка меню содержала две строки: значок и текст.

Проблема в том, что каким-то образом указатель на кнопку иона заставляет кнопку находиться на одной линии.

Мне нужна директива ion-button, чтобы убедиться, что кнопка всегда правильно реагирует на форматирование и позиционирование. Мне просто нужно, чтобы эта кнопка была на двух линиях.

Это 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;
    }

ВОПРОС :

Как сделать ионную кнопку на двух линиях?

Спасибо!

10
задан c_ogoo 27 November 2019 в 18:17
поделиться