Larger FAB size

Ionic Framework ionic-v3
1

I am looking for a way to increase the size of the FAB button.
There’s a mini size attribute, but I am looking for large.

2

Any news on that ? I’m also looking for a solution. I try to set $fab-size but it’s not working

3

Nope, I stuck with the default size

4

I got it working!!!

if you set $fab-size or $fab-mini-size in src/theme/variables.scss
it is working perfectly.

5

Can you please post an example?

6

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
2 Likes
7

Can I use fab-size:%50 ?
this screen size change depends

8

Yes, thx thats exactly what i was looking for!

9

Use class .fab

Exemple:

home.scss

page-home {

.fab {
width: 100px !important;
height: 100px !important;
}

…

}

1 Like
10

this worked for me Thanks. because i didn’t wanted to change globally for all fab icons in theme/variable.scss

11

This will work for ionic 3/4/5

<ion-fab vertical="top" horizontal="start" slot="fixed" class="custom-fab"> <ion-fab-button> <ion-icon name="home"></ion-icon> </ion-fab-button> </ion-fab>

.custom-fab {
width: 100px !important;
height: 100px !important;
}