cordova - hur man gör ikoner och knappar större i ionic 2

Hur kan man göra button och icon större i följande kod:

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-left></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-left></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-left></ion-icon>
      Cafe
    </button>
  </ion-list>
</ion-card>

Svar #1

Ikoner

ion-icons är fontikoner, så de kan redigeras med följande Sass/CSS eftersom de i princip är text:

    ion-icon {
        font-size: 20px; //Preferred size here
    }

Knappar

När det gäller button har Ionic några inbyggda klasser för att påverka storleken. Till exempel:

   <button ion-button large>Large</button>

   <button ion-button>Default</button>

   <button ion-button small>Small</button>

Du kan också uppdatera standard Sass-variabeln $button-round-padding i din src/theme/variables.scss-fil till den storlek du vill ha. Mer om knappar finns här

Svar #2

I mina Ionic 4-appar använde jag följande tillvägagångssätt. I *.scss-filen:

ion-icon { zoom: 1.5 }

Självklart beror zoomvärdet på dina behov.
Hoppas detta hjälper någon. o/

Relaterade artiklar