如何在以下代码中增大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>
最佳答案
图示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上找到更多关于按钮的信息