如何在 jQuery 移动按钮中使用很棒的字体图标

我正在尝试使用带有 font Awesome 按钮的 jquery mobile，为此，我遵循了此中描述的答案post https://stackoverflow.com/questions/18809890/how-where-to-install-font-awesome-in-jquery-mobile-app。但是，当我尝试在按钮中使用图标时，该类ui-icon-fa has display: inline-block并且按钮现在不是全宽的。我该如何解决这个问题？

我不会像提到的帖子中那样创建一堆类，而是使用标准<i class="fa fa-camera-retro"></i>然后用一些 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 http://jsfiddle.net/ezanker/tasqnjb8/

如果您喜欢标准 jQM 图标中的灰色磁盘，请添加一个新类（例如 ui-fa-disk）和以下 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 http://jsfiddle.net/ezanker/tasqnjb8/2/