如何在以下代码中增大buttonicon的大小:

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

最佳答案

图示
ion-icon是字体图标,因此可以在以下Sass / CSS中对其进行编辑,因为它们实质上是文本:

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

纽扣

至于button ionic有一些内置的类会影响大小。例如:
   <button ion-button large>Large</button>

   <button ion-button>Default</button>

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

您还可以将$button-round-padding文件中的默认Sass变量src/theme/variables.scss更新为所需的大小。可以在here上找到更多关于按钮的信息

09-11 19:33
查看更多