我不会像参考文章中那样创建一堆类，而是使用标准的<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;
}

如果您喜欢标准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;
}

已更新**DEMO**

如果您需要将图标左对齐、右对齐或应用任何其他jQuery移动的排列（例如，类ui-btn-icon-right），则已接受的答案将无法正常工作。
我建议使用这个Github repo中创建并维护的dotcastle库。图标的行为与标准的jQuery移动的图标完全一样。
示例用法：

<span class="ui-btn-icon-notext ui-icon-fa-500px"></span>

那就直接用display: block内联吧。

对于只有图标的按钮和带有白色图标的默认样本，我使用这个CSS。

示例

一个图标非常宽，另一个图标为圆形。Demo

<button class="fa fa-address-card ui-btn ui-btn-icon-notext ui-corner-all"/>

<button class="fa fa-plus-circle ui-btn ui-btn-icon-notext ui-corner-all"/>

CSS格式

.ui-btn.fa.ui-btn-icon-notext
{
    text-indent: 0px;
    color: #fff;
    background-color: #acacac;
    padding: 0.1em;
    font-size: 0.8985em;
    height: 1.75em;
    width: 1.75em; 
    /* use inset box-shadow to simulate black background (:after) with opacity, which did blend white fa icons 
        default outset black shadow*/
    box-shadow: inset 0 0 0px 0.21em #f6f6f6, 0 1px 3px rgba(0,0,0,.15);
    text-shadow: none;
}

.ui-btn.fa.ui-btn-icon-notext:focus
{
    box-shadow: inset 0 0 0px 0.21em #f6f6f6, 0 0 12px #38c; /* inset and default outset focus shadow */
}

.ui-btn.fa.ui-btn-icon-notext:hover
{
    box-shadow: inset 0 0 0px 0.21em #ededed, 0 1px 3px rgba(0,0,0,.15);; /* simulate default hover with box shadow, default outset black shadow */
}

.ui-btn.fa.ui-btn-icon-notext:after
{
    background-color: transparent;
    content: "";
}

背景：

最初的方法非常简单，但只允许黑色或深色字体的图标，因为jquery使用以下规则来渲染图标。白色图标将与after透明背景混合。我使用 inset box-shadow来避免这种情况。

.ui-btn-icon-notext:after 
{
    background-color:#666;
    background-color:rgba(0,0,0,.3);
}

data: "Update",
                                "render": function (data, type, row, meta) {
                                    return '<a href="#container" style="color:white" onclick="changeRM1(this)"><i class="fa fa-pencil-square-o" aria-hidden="true" style="height:50px;width:70px"   id="button_' + i + 1 + '" type="button" ></i></a>'