如何在jquery移动中添加图标

How to add an icon in jquery mobile?

本文关键字：添加 图标 移动 jquery      更新时间：2023-09-26

在jquery mobile中，我动态添加如下标签：

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

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

谢谢

您可以在<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"/>

这就是对我有用的

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

对于内联图标，您可以使用 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;
}

这是两个选项的演示： 小提琴

相关文章：