ionic2自定义图标大小和按钮大小

Question

这是分享按钮，但图标尺寸太大，我希望它很小

.html 文件

<ion-row>
  <button ion-fab color="wechat" (click)= "wechatshare(new)" small><ion-icon name="minan-wechat"></ion-icon></button>
  <button ion-fab color="danger" (click)= "weiboshare(new)"><ion-icon name="minan-weibo"></ion-icon></button>
  <button ion-fab color="primary" (click)= "qqshare(new)"><ion-icon name="minan-qq"></ion-icon></button>
  <button ion-fab color="wechat" (click)= "whatsappshare(new)"><ion-icon name="logo-whatsapp"></ion-icon></button>
  <button ion-fab color="facebook" (click)= "FBshare(new)"><ion-icon name="logo-facebook"></ion-icon></button>
</ion-row>

.css文件

.row .button-icon{
    width: 1em;
    height: 1em;
}

这就是我在css文件中所做的，但仍然不适合我。

感谢帮助，更好地帮助我设计一个漂亮的分享按钮。

Answer 1

尝试使用以下代码调整图标的字体大小。

ion-icon {
  font-size: 14px; // Your size here
}

Answer 2

您可以通过以下两种方式执行此操作：

1：覆盖ion-icon

的CSS类

ion-icon {
    font-size: 25px;
}

2：在ion-icon标签内创建一个类：

.icon_size{
     font-size: 25px;
  }

如果尺寸没有减少。尝试使用！important

ion-icon {
        font-size: 25px !important;
    }

Answer 3

请尝试使用ion-icon{zoom:1.5} 离子4+版本在css或scss中使用。