<ion-header mode="ios">
     <ion-toolbar class="ion-no-padding" mode="ios" color="secondary">
      <ion-buttons mode="md" slot="start">
        <ion-button (click)="toggleMenu()">
         <ion-icon slot="icon-only" src="assets/icon/hamburger.svg"></ion-icon>
        </ion-button>
      </ion-buttons>
      <ion-title>My Navigation Bar</ion-title>
    </ion-toolbar>
 </ion-header>

Esto funciona perfectamente para el título de Ion en el centro. Quiero agregar un logotipo al centro en lugar del texto. Intenté agregar ícono de iones dentro del título de iones, pero no funcionó.

    <ion-title>
     <ion-icon slot="icon-only" src="assets/icon/logo.svg"></ion-icon>
    </ion-title>
0
maaz 15 abr. 2020 a las 09:48

2 respuestas

La mejor respuesta

¿Por qué no usas ion-text-center para el título de iones?

<ion-header>
  <ion-toolbar>
    <ion-title class="ion-text-center">
      <ion-img src="../../assets/img/logo.png"></ion-img>
    </ion-title>
  </ion-toolbar>
</ion-header>
1
Tomas Vancoillie 15 abr. 2020 a las 10:11

Se prefiere poner el logotipo dentro de un div y darle un nombre de clase

.classname {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transperent;
}

Y ahora todo debería funcionar normalmente, pero creo que si pones esta clase para la barra de herramientas de iones, incluso el botón de iones se colocará en el centro.

1
Mostafa Harb 15 abr. 2020 a las 08:47