Jquery mobile 在jquery移动列表中使用左侧和右侧的自定义图标_Jquery Mobile

Jquery mobile 在jquery移动列表中使用左侧和右侧的自定义图标

jquery-mobile

Jquery mobile 在jquery移动列表中使用左侧和右侧的自定义图标,jquery-mobile,Jquery Mobile,我正在尝试找出如何在列表项的左侧和右侧添加自定义图标。我发现了这个例子（见下面的链接和代码），但如果你注意到图标没有显示，它只是一个空圆圈。起初我以为这是因为链接无效，但我用自己的图片在我的页面上尝试了它，但同样的事情发生了。不幸的是，我的名声只有13岁，所以我不被允许发布图片，但是这里有一个示例，我希望li项目的两端都有图标 -*****************************- |图标左文本图标右 -*****************************- <html>

我正在尝试找出如何在列表项的左侧和右侧添加自定义图标。我发现了这个例子（见下面的链接和代码），但如果你注意到图标没有显示，它只是一个空圆圈。起初我以为这是因为链接无效，但我用自己的图片在我的页面上尝试了它，但同样的事情发生了。不幸的是，我的名声只有13岁，所以我不被允许发布图片，但是这里有一个示例，我希望li项目的两端都有图标

-*****************************-
|图标左文本图标右
-*****************************-

<html>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.ui-icon-myapp-smiley {
background-image: url(http://swiftthemes.com/forums/images/icons/icon6.png) !important;
}
</style>
<div data-role="page">
  <div data-role="content">
    <ul data-role="listview">
        <li data-icon="myapp-smiley"><a href="#">My LI!!!</a></li>
    </ul>
  </div>
</div>
</html>


.ui图标myapp笑脸{
背景图片：url(http://swiftthemes.com/forums/images/icons/icon6.png)！重要；
}

jQM 1.0.1的JSFIDLE页面上的代码现在已经非常陈旧过时了。您应该升级到1.4和jQuery 1.9或更高版本

<ul data-role="listview" data-inset="true" >
    <li data-icon="myicon"><a href="#"><span class="ui-icon-myicon2 ui-btn-icon-notext inlineIcon"></span>Text in list item 1</a></li>
</ul>

.ui-icon-myicon:after {
    background-image: url("http://people.mozilla.org/~shorlander/files/australis-linux-svg-test/images-linux/toolbarButton-bookmark.svg");
}
.ui-icon-myicon2:after {
    background-image: url("http://forum.librecad.org/images/gear.png");
}
.inlineIcon {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin-right: 6px;
}

这里有一个

非常感谢=）我想投票支持你的回答，但上面说我需要15岁的声誉。最后一个问题，我试图格式化列表分隔符上的文本以匹配标题，但它就是不起作用。这是我的头h1和分隔符的css代码。h1{color:#ffffffff；text shadow:2px 2px#B2C2D1；}.ui-li分割器{color:#FFFFFF！重要；text shadow:2px 2px#B2C2D1；background:#2F4F4F！重要；text align:center！重要；}@speedracer2003，你的分割器css似乎起作用了：请注意，我对你的问题投了赞成票，所以你现在有了声誉；）

.ui-icon-myicon2:after {
    background-image: url("http://forum.librecad.org/images/gear.png");
    background-color: transparent;
}