1

tengo una lista de botones, las cuales van con icono y texto, el ideal es que el icono esté sobre el texto, pero este no se comporta de acuerdo a la estructura flexbox con la propiedad flex-flow

html

<ion-col align-self-center size="4">
    <ion-button size="large" expand="block">
        <div class="icon-dinner large-ico"></div>
        Dine in
    </ion-button>
  </ion-col>

css

ion-button {
    display: flex;
    flex-flow: row wrap;
}

este es mi resultado actual

introducir la descripción de la imagen aquí

2 respuestas 2

0

Hola si lo que quieres es que el icono este sobre el texto el flex-direction de tu botón debería ser column, en tu caso seria:

ion-button {
    display: flex;
    flex-flow: column wrap;
}

Prueba a ver si esto soluciona tu problema. Saludos

1
  • ya lo había intentado y no funciona, y en la documentación de ionic4 no salen los botones con iconos, y en la version 3 los iconos aparecen en línea con el texto Commented el 8 may. 2019 a las 18:31
0

la unica solución que pude encontrar, fue el agregar un div dentro del ion-button y a este, incorporar el icono y texto y darle un formato css flexbox

html

<ion-button size="large" expand="block" href="/counter">
      <div class="btn-wrap">
        <div class="icon-counter1 large-ico"></div>
        Counter
      </div>
</ion-button>

css

.btn-wrap {
height: 100%;
display: flex;
flex-flow: column wrap;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.