如何在 jQuery 移动按钮中使用字体真棒图标答案

【问题标题】：How to use font awesome icons in jQuery mobile buttons如何在 jQuery 移动按钮中使用字体真棒图标
【发布时间】：2018-11-29 12:53:45
【问题描述】：

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

【问题讨论】：

你为什么不使用 font-awesome 原样：
因为它会在文本旁边生成图标。我希望图标像其他 jquery 按钮一样位于左侧。

标签： css jquery-mobile fonts font-awesome

【解决方案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;
}

更新DEMO

【讨论】：

不幸的是，如果您使用特殊类进行对齐和其他排列（例如，ui-btn-icon-right），则使用此方法的图标不会像原生 jQuery Mobile 图标那样表现。
这基本上是我的观点——每当你遇到与对齐、大小、颜色等相关的 jQuery Mobile 原生类时，你都必须编写额外的类。使用我在下面发布的 Font Awesome to JQM 对话库，所有 JQM 原生类都可以正常工作，无需编写额外的自定义类。
@ElliotB。我回复的时候没有看到你的帖子。那个图书馆看起来不错！

【解决方案2】：

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

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

示例用法：

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

【讨论】：

虽然我喜欢你的回答，而且总的来说我会使用你的，但它有问题。首先，对于库来说，它非常“重”，只有 1.4mb。另外，我发现我在不适应文本颜色时遇到了问题。使用ezanker's answer允许更轻的使用，同时让它适应元素的颜色集。不过感谢您发布它！

【解决方案3】：

然后使用display: block inline。

【讨论】：

图标的哪个容器，我只有：<a href="ui-icon-fa ui-icon ui-icon-fa-user ui-btn....">text</a>
您可以在图标本身上使用它
然后用'display: block'重置显示

【解决方案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);
}

【讨论】：