css - 如何在 jQuery 移动按钮中使用 Font Awesome 图标

Question

我正在尝试将 jquery mobile 与超赞字体按钮一起使用，为此，我遵循了此 post 中描述的答案。 .但是，当我尝试在我的按钮中使用图标时，类 ui-icon-fa 有 display: inline-block 并且按钮现在不是全宽的。我该如何解决这个问题？

Answer 1

我不会像引用帖子中那样创建一堆类，而是使用标准 <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

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