ionic: how to change the size of FAB icon

Question

I am new to cross-platform dev. Struggling with changing the size of FAB. This is what I have now:

<ion-fab center middle>
<button ion-fab color="blue" class="fabStartBtn"><ion-icon 
name="start">Start</ion-icon></button>
</ion-fab>  

.fabStartBtn {
font-size: 72px;
}

But the size is still the same. How can I get access to the button attribute? I tried id, name, #name, :before - didn't work.

Solution 1

Try to use this:

<ion-fab center bottom>
  <button ion-fab mini><ion-icon name="add"></ion-icon></button>
</ion-fab>

If you use the mini attribute you can modify the size with this:

.fab[mini] {
    margin: 8px;
    width: 40px;
    height: 40px;
    line-height: 40px;
}

If you modify that class you can make the FAB button bigger or smaller.

Solution 2

Go into your theme/variables.scss file and override the $fab-size variable like this:

$fab-size: 70px; //Change value to whatever size you want

Solution 3

If you want to change the size of the fab and still have it centered add these classes to your scss.

ion-fab-button {
   width: 100px;
   height: 100px;
}

.fab-horizontal-center {
   margin-left: unset;
   margin-inline-start: -50px !important;
}

The margin-inline-start has to be the half of the width.

Reported the bug here: https://github.com/ionic-team/ionic-framework/issues/22564

Comments

[IntelligenceArtificial]

Thank you, it worked! The size can be customised now, but the position is not in the centre, it shifted to the right bottom for some reason. What can be the reason?

[Fernando Del Olmo]

can you give me the html? btw <ion-fab center bottom> this will put your fab button align on the center and at the bottom of your page but if you have <ion-fab right bottom> you will have the button on the righ bottom corner

[IntelligenceArtificial]

Yeah, I used centre middle, cause I basically need a big clickable circle in the centre of the screen. <ion-fab center middle> <button ion-fab mini><ion-icon name="start">Start</ion-icon></button> </ion-fab>

[IntelligenceArtificial]

I also tried to play with position, alignment attributes in .scss file, didn't work

[Fernando Del Olmo]

i try this <ion-fab center middle> on my code and it works so what its your code?

[IntelligenceArtificial]

uploaded it above

[Fernando Del Olmo]

with only my code and the sass i mention the button go bottom? i have that and its works you dont have any other class right?

[IntelligenceArtificial]

Tested for relatively small sized, works well - it's in the centre. Ones increase to a certain size(i.e. 280px), is shifts closer to the right bottom

[Fernando Del Olmo]

Woa didnt expect that ill test that asap