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

Question

我正在尝试使用 jquery 带有超棒字体按钮的移动设备，为此，我遵循了此 post 中描述的答案。但是，当我尝试在我的按钮中使用图标时，class ui-icon-fa 有 display: inline-block 并且按钮现在不是全宽的。我该如何解决这个问题？

Answer 1

然后使用 display: block 内联。

Answer 2

我不会像提到的 post 那样创建一堆 classes，而是使用标准 <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 图标中的灰色磁盘，请添加新的 class（例如 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

Answer 3

如果您需要将图标左对齐、右对齐或应用任何其他 jQuery 移动排列（例如 class ui-btn-icon-right），则接受的答案将无法正常工作。

我建议使用创建 dotcastle 并在此 Github repo 中维护的库。这些图标的行为与标准 jQuery 移动图标完全一样。

用法示例：

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

Answer 4

对于纯图标按钮和带有白色图标的默认样本，我使用这个 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);
}

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

How to use font awesome icons in jQuery mobile buttons

css

jquery-mobile

fonts

font-awesome