i want to insert a label so that matches every FAB icon on the Fab list whats the correct way of doing it. the way i did it it doesn't work
<ion-fab left middle>
<button ion-fab color="dark">
<ion-icon name="arrow-dropup"></ion-icon>
<ion-label>here</ion-label>
</button>
<ion-fab-list side="top">
<button ion-fab>
<ion-icon name="logo-facebook"></ion-icon>
<ion-label>here</ion-label>
</button>
<button ion-fab>
<ion-icon name="logo-twitter"></ion-icon>
</button>
<button ion-fab>
<ion-icon name="logo-vimeo"></ion-icon>
</button>
<button ion-fab>
<ion-icon name="logo-googleplus"></ion-icon>
</button>
</ion-fab-list>
</ion-fab>
The chosen answer seemed to work most of the time, but in some iOS devices it was not picking up the
contain: layout;
setting, making the label not align. I didn't need my label as part of the clickable button, so my FAB label addition is below which works on iOS. Fairly simple.HTML
CSS
For what it's worth, I was able to accomplish what you ask with the following SCSS.
It'd be nice if this was supported directly by Ionic, but I can't find anything indicating this is built-in.
ross solution is great,but in order for it to work on Ionic v2 I had to change the
.fab
class that comes with Ionic fromcontain: strict
tocontain: layout
.This is how the class is originally:
So, add the following on your page .scss file:
It will overwrite the default
.fab
class for the page and it will work.