How to use font awesome icons in jQuery mobile buttons

Question

I'm trying to use jquery mobile with font awesome buttons, to do so, I followed the answer described in this post. However, when I try to use icons in my buttons, the class ui-icon-fa has display: inline-block and the button is not full width now. How can I fix this issue?

Answer 1

Instead of creating a bunch of classes as in the referred post, I would use the standard <i class="fa fa-camera-retro"></i> and just place it correctly with some CSS:

<button class="ui-btn ui-btn-fa"><i class="fa fa-camera-retro"></i>hello</button>

.ui-btn-fa {
    padding-left: 2.5em;
}
.ui-btn-fa .fa {
    position: absolute;
    left: 9px;
    width: 22px;
    height: 22px;
}
.ui-btn-fa .fa:before {
    line-height: 22px !important;
}

DEMO

If you like the gray disk from the standard jQM icons, add a new class (e.g. ui-fa-disk) and the following CSS:

<button class="ui-btn ui-btn-fa ui-fa-disk"><i class="fa fa-user"></i>hello</button>

.ui-fa-disk .fa {
    background-color: rgba(0, 0, 0, 0.298039);
    border-radius: 1em;
    font-size: 14px;
}

Updated DEMO