Using font awesome icons on buttons

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.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>

  1. The icon is too large
  2. The icon is silver in color (should be white)
  3. On hover the icon takes on the colour of the button hover colour, making it invisible

Am I doing something wrong?

Hi Vincent,

I just tried your code and it works fine for me. Using the ‘ios’ theme and a custom ‘my-button’ class on the element with the following CSS:

.my-button.mbsc-btn {
    background: #430095;
    color: #fff;
    text-transform: uppercase;

I got the expected result:
(with correct size, color and hover effect)


There are probably some custom CSS rules which are affecting the button style.
Could you please check if that is the case?