如何在 Ionic 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-icon 是字体图标，因此可以编辑以下 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>

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

Answer 2

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

ion-icon { zoom: 1.5 }

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

Answer 3

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

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

Answer 4

要指定图标大小，可以将 size 属性用于预定义的字体大小。示例如下：

<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

Answer 5

您可以添加以下代码：

离子图标 {字体大小： 3rem;}