I’m using mobiscroll V4 and I want to use an icon from font awesome on a button. Specifically: Prescription Bottle Alt Icon | Font Awesome
So I’ve followed your example in the documentation and so I’ve added the following css:
.mbsc-ic.icon {
font-family: inherit;
font-weight: normal;
}
.mbsc-ic.icon:before {
font-family:'Font Awesome\ 5 Free', 'Font Awesome\ 5 Brands', 'Font Awesome 5 Pro';
}
.mbsc-ic.icon.fas:before,
.mbsc-ic.icon.fa:before {
font-weight: 900;
}
Which works fine if I’m adding an icon to a tab control, like so:
<li data-tab='md-tab-diaper' data-icon='empty icon fas fa-baby' data-id='diaper'>Diaper</li>
However if I want to add an icon to a button there are a few problems.
So here’s my code:
<button mbsc-button data-icon='empty icon fas fa-prescription-bottle-alt' id=addbutton-medicine data-role='none'>Medicine</button>
- The icon is too large
- The icon is silver in color (should be white)
- On hover the icon takes on the colour of the button hover colour, making it invisible
Am I doing something wrong?