如何使离子2中的图标和按钮更大

Question

如何使代码中的大小button和icon大小更大:

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

Answer 1

图标

ion-icons是字体图标,因此可以编辑以下Sass/CSS,因为它们本质上是文本:

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

纽扣

至于button离子有一些内在的类来影响大小.例如:

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

   <button ion-button>Default</button>

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

您还可以$button-round-padding将src/theme/variables.scss文件中的默认Sass变量更新为您想要的大小.有关按钮的更多信息,请点击此处

Answer 2

在我的 Ionic 4 应用程序中，我采用了以下方法。在 *.scss 文件中：

ion-icon { zoom: 1.5 }

当然，缩放值取决于您的需要。
希望这对某人有帮助。哦/

Answer 3

即使对于Icon,我们也可以使用大小的离子图标标签.这就是我用过的方式

<ion-icon name="arrow-forward" item-end small></ion-icon>