Question

我找到了有关使用jQuery mobile buttons的自定义图标以及如何customize lists using existing icons的文档，但我无法找到如何向列表视图添加自定义图标（即我创建自己的PNG）。< / p>

我尝试过设置data-url：

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

到png文件的名称，如jQuery mobile buttons中所述，但这不起作用。

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/（更新后的链接）

Answer 2

除了背景图像，您可能还想修改背景颜色和图标容器的大小。默认情况下，图标为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;
    }

Answer 3

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

将一个类放到要修改的列表中，“newlist”（如果您要修改某些列表，而不是所有站点）
使图标消失：.newlist span.ui-icon{display:none}
创建新图标类：“newicon”和style{position:relative}
您可以将图片作为背景或将其加载到div中，我将其加载到内部，因为我想为每个人添加一个不同的图标，style{ position:absolute;width:24px;heigh;24px;right:10px;top:50%;margin-top:-12px;display:block}
将带有图片的div放在<a>元素中的<li>元素之后

我使用24x24像素图像

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

3 个答案: