如何在jQuery移动按钮中使用字体真棒图标 [英] How to use font awesome icons in jQuery mobile buttons

问题描述

我正在尝试将jquery mobile与超棒的字体按钮一起使用，为此，我遵循了

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?

推荐答案

我将使用标准的<i class="fa fa-camera-retro"></i>并将其正确放置在一些CSS中:

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

如果您喜欢标准jQM图标中的灰色磁盘，请添加一个新类(例如ui-fa-disk)和以下CSS:

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

这篇关于如何在jQuery移动按钮中使用字体真棒图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！