How to change FAB size?

1

Please help.
I’m trying to change fab size but can not find where I should change in css

2

–f7-fab-size: 150px;

https://framework7.io/docs/floating-action-button.html#css-variables

3

What if I want to change just 1 fab not all fab button?
Can I just put the class into the same line ?

<div class="fab fab-extended fab-left-bottom color-white fab-size">

.my-fab {
   --f7-fab-size: 50px;
}
4

.big-fab {
–f7-fab-size: 75px;
}
.small-fab {
–f7-fab-size: 25px;
}

<div class="fab fab-left-top color-yellow big-fab">
...
<div class="fab fab-right-top color-orange small-fab">

image

5

Screen Shot 2563-04-17 at 22.49.25
Screen Shot 2563-04-17 at 22.49.252058×420 215 KB

:disappointed: why my code not working ?

6

dont know.
it works fine for me. send the full screen, you see there f7-fab-size: 25px is cross down. so i dont know bcs i cant see your full code

7

so strange . I just put this only

.small-fab {
–f7-fab-size: 25px;
}

Will try the clean code and check it again.
Thank you so much.

8

Try add !important.

.small-fab {
–f7-fab-size: 25px !important;
}