logo标签列表

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

cssjquery-mobilefontsfont-awesome
3

我正在尝试在jQuery Mobile中使用Font Awesome按钮。为此，我按照此帖子中描述的答案进行了操作。然而，当我尝试在按钮中使用图标时，类ui-icon-fa具有display:inline-block属性，导致按钮不再是全宽度。我该如何解决这个问题？

为什么你不直接使用 Font Awesome 呢？代码如下：<i class="fa fa-car fa-fw"> - aorfevre
因为这样可以在文本旁边生成图标。我希望该图标被放置在左侧，就像其他 jQuery 按钮一样。 - Javier Enríquez
5个回答
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;
}

演示

如果你喜欢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图标一样运作。 - Elliot B.
这基本上就是我的观点——每当你遇到一个与jQuery Mobile本地类相关的对齐、大小、颜色等问题时，都必须编写额外的类。使用我在下面发布的Font Awesome转换为JQM库，所有JQM本地类都可以正常工作，无需编写额外的自定义类。 - Elliot B.
@ElliotB。在我回复时，我没有看到你的帖子。那个库看起来不错！ - ezanker
1

如果您需要将图标左对齐、右对齐或应用任何其他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的答案可以减少库文件的使用量，并且可以根据元素设置的颜色进行调整。感谢您的发布！ - G Trawo
0
 data: "Update",
                                "render": function (data, type, row, meta) {
                                    return '<a href="#container" style="color:white" onclick="changeRM1(this)"><i class="fa fa-pencil-square-o" aria-hidden="true" style="height:50px;width:70px"   id="button_' + i + 1 + '" type="button" ></i></a>'
目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community
0
只需要内联使用display: block即可。
我只有一个图标的容器：<a href="ui-icon-fa ui-icon ui-icon-fa-user ui-btn....">text</a>。 - Javier Enríquez
你可以在图标本身上使用它。 - Grzegorz Palian
只需使用"display: block"重置显示。 - Grzegorz Palian
0

对于仅包含图标的按钮和带有白色图标的默认样式，我使用以下CSS。

示例

其中一个具有非常宽的图标和圆形图标。演示

<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: "";
}

背景：

最初的方法非常简单，但只允许使用黑色或深色的font awesome图标，因为jquery使用以下规则来渲染图标。白色图标将与此after透明背景混合。我改用inset box-shadow来避免这种情况。

.ui-btn-icon-notext:after 
{
    background-color:#666;
    background-color:rgba(0,0,0,.3);
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接