Javascript 在jquery移动列表中使用自定义图标

我已经找到了使用自定义图标以及如何使用的文档，但我找不到如何将自定义图标添加到列表视图（即我自己创建的PNG）

我已尝试设置

数据url

：

<li data-icon="action-arrow">...</li>

---

添加到png文件的名称，如中所述，但这不起作用。

您需要为新图标添加CSS规则：

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
}

Upadate：

您还可以使CSS规则比jQuery移动规则更具体，如下所示：

html .ui-icon-myapp-email {
    ...
}

就这样，您应该能够通过如下方式引用该图标来使用该图标：

<li data-icon="myapp-email"><a href="#">MY LI!!!</a></li>

请注意，如果

li

元素中没有链接，则不会显示图标

---

这是一个演示：（更新的链接）

除了背景图像之外，您可能还需要修改图标容器的背景颜色和大小。默认情况下，图标为18x18像素。如果您的图标大于此值，您还必须更改位置和边距

/* email icon */
 .ui-icon-myapp-email {
    background-image: url("app-icon-email.png") !important;/*I added the !important, I found that this rule was being overwritten*/
    background-color: none;
    border: none;
    box-shadow: none;
    }

---

我已经解决了这个问题，因为我想在我的web应用程序中使用svg文件：

• 将类放入要修改的列表中，“newlist”（如果要修改某些列表，而不是整个站点）
• 使图标消失：

  .newlist span.ui图标{display:none}

• 创建新的图标类：“newicon”和

  style{position:relative}

• 您可以将图像作为背景或加载到div中，我将其加载到了div中，因为我想为每个人放置一个不同的图标，

  style{position:absolute；width:24px；heigh；24px；right:10px；top:50%；margin top:-12px；display:block}

• 在
  元素中的
  元素之后放置带有图像的div

---

我使用了24x24像素的图像

这是

！重要信息

我也明白了，回答得很好，谢谢。我是唯一一个在小提琴上看不到徽标的人吗？@gsamaras看起来以前显示的徽标不再可用了。我将URL更改为现有图像资源。还有，

！重要的

关键字是不必要的，只要你使你的CSS规则比jQuery Mobile规则更具体，你可以在类前面添加

html

。@Jasper谢谢你的快速回答。但是，如果我使用一些较新版本的jquery mobile，图标将设置在所有位置：

你能看到问题吗，或者你想让我做一把小提琴吗？如果我使用第二个答案的解决方案，我将只显示一次图标（正确），但它将保留到它应该进入的圆圈中@gsamaras在jQuery Mobile的最新稳定版本（1.4.5）中，图标没有自己的

元素，而是

：在
伪元素之后，选择如下：
。ui图标操作：在
之后。这是专门针对“动作”图标的。以下是jQuery移动团队建议您如何使用自定义图标的文档链接（与上述答案非常类似）：