如何在 jquery mobile 中添加图标？答案

【问题标题】：How to add an icon in jquery mobile?如何在 jquery mobile 中添加图标？
【发布时间】：2015-02-04 02:47:33
【问题描述】：

在 jquery mobile 中，我动态添加这样的标签：

str += '<img class="ui-icon-location"/>' + obj['address'] + ', ' + obj['city'] + ', ' + obj['country'];

我想将位置图标放在文本的左侧。图标本身来自类。但由于 src 不存在，我实际上并没有看到该图标。有谁知道如何解决这个问题？

谢谢

【问题讨论】：

标签： javascript jquery jquery-mobile icons

【解决方案1】：

您可以在<img> 标签上使用<div> 标签。你需要再添加一个类ui-icon

<div class="ui-icon ui-icon-location"></div>

注意：<div> 标签应用相同的 CSS。

更新：如果你想使用 span

<span class="ui-icon ui-icon-location" style="display: inline-block"/>

【讨论】：

我的错，我对 glyphicons 感到困惑……jQuery 移动图标可以应用于按钮、div 和 spans 等
图标不显示，因为 div 中没有内容。我认为固定尺寸也不是一个好主意，因为那样它就不能很好地适应不同的设备尺寸。
This SO Answer 说要使用 span 而不是 div
我试过<span class="ui-icon ui-icon-location" style="display:inline-block"></span>，但又没有图标显示，因为没有内容，它最终是 0px x 0px...

【解决方案2】：

这对我有用

<span class="ui-icon-location ui-btn-icon-left" style="position:relative;"/>

【讨论】：

【解决方案3】：

对于内联图标，您可以使用 span 和一些 CSS

<span class="ui-icon-location ui-btn-icon-notext inlineIcon"></span>

.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

所以对于你的动态插入：

var str = '<span class="ui-icon-location ui-btn-icon-notext inlineIcon"/>' + obj["address"] + ', ' + obj["city"] + ', ' + obj["country"];    
$("#dynamicText").empty().append(str);

如果您更喜欢背景中没有灰色圆盘的黑色图标：

<span class="ui-alt-icon ui-icon-location ui-btn-icon-notext inlineIconNoDisk"></span>

.inlineIconNoDisk {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 2px;
}
.inlineIconNoDisk:after {
    background-color: transparent;
}

这是一个包含两个选项的演示：FIDDLE

【讨论】：