CODEWITHSUNDEEP
htmlcssionic-frameworkionic2
Yuyang He
Yuyang He

Reputation: 2272

ionic2 custom icon size and button size

Here is the sharing button, but icon size too big, I want it to be small

enter image description here

.html file

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

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

This is what I did in css file, but still not working for me.

Thanks help and better help me design a beautiful share button.

Upvotes: 0

Views: 2788

Answers (3)

SHRIKANT PATKI
SHRIKANT PATKI

Reputation: 1

Please try to use ion-icon{zoom:1.5} in css or scss for ionic 4+ version.

Upvotes: 0

jesusverma
jesusverma

Reputation: 1745

You can do this by 2 ways:

1: override the CSS classes of ion-icon

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

2: Create a class inside ion-icon tag:

.icon_size{
     font-size: 25px;
  }

In case if size is not decreasing. Try to use !important

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

Upvotes: 2

Zowie van Geest
Zowie van Geest

Reputation: 169

Try to adjust the font size of the icon with the following code.

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

Upvotes: 1

Related Questions