How to use font awesome icons in jQuery mobile buttons

问题

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?

回答1:

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

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

回答2:

The accepted answer won't work properly if you need to align the icons left, right or apply any other jQuery Mobile permutations (e.g., class ui-btn-icon-right).

I would recommend using the library created dotcastle and maintained in this Github repo. The icons behave exactly like they would if they were standard jQuery Mobile icons.

Example usage:

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

回答3:

Just use display: block inline then.

回答4:

For icon only buttons and default swatch with white icons i use this CSS.

Example

One with a very wide icon and a round icon. 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: "";
}

Background:

The initial approach is very simple but only allows black or dark font awesome icons because jquery uses following rule to render icons. A white icon will blend out with this after transparent background. I avoid this using inset box-shadow instead.

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

来源：https://stackoverflow.com/questions/31012650/how-to-use-font-awesome-icons-in-jquery-mobile-buttons

标签

css

jquery-mobile

fonts

font-awesome