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

Question

我找到了有关使用jQuery移动按钮的自定义图标以及如何使用现有图标自定义列表的文档,但我无法找到如何将自定义图标添加到列表视图(即我创建自己的PNG).

我试过设置data-url:

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

到jQuery移动按钮中解释的png文件的名称,但这不起作用.

Answer 1

您需要为新图标添加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 Mobile规则更具体,如下所示:

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

这就是它,你应该能够通过这样引用它来使用这个图标:

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

请注意,如果li元素中没有链接,则不会显示图标.

这是一个演示:http://jsfiddle.net/KYaQT/106/(更新后的链接)