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

这里是分享按钮，但图标的尺寸太大，我希望它是小ionic2自定义图标大小和按钮大小

的.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文件，但仍然不适合我。

感谢帮助和更好的帮助我设计一个美丽的分享按钮。

来源

2017-08-25 Yuyang He

您可以通过2种方式做到这一点：

1：覆盖离子图标的CSS类

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

2：创建离子图标标签中的一类：

.icon_size{ 
    font-size: 25px; 
    }

In ca如果大小不减少尝试使用！重要

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

来源

2017-08-25 08:45:04 jesusverma

非常感谢！我尝试过使用！重要的是，图标大小已更改，但按钮仍然很大 –

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

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

来源

2017-08-25 08:34:12

我刚才试了这段代码，但仍然没有改变我 –

@YuyangHe你有没有试着用覆盖它！重要？ –

我试过了！重要的是，图标大小改变了，但按钮仍然很大 –

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

回答

相关问题