javascript 在 jquery 移动列表中使用自定义图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9041311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using custom icons in jquery mobile list
提问by rogermushroom
I have found documentation on using custom icons for jQuery mobile buttonsand how to customize lists using existing iconsbut I am unable to find how to add custom icons to list views (i.e. PNGs I have created my self).
我找到了有关使用jQuery 移动按钮的自定义图标以及如何使用现有图标自定义列表的文档，但我无法找到如何将自定义图标添加到列表视图（即我自己创建的 PNG）。
I have tried setting the data-url:
我试过设置data-url：
<li data-icon="action-arrow">...</li>
to the name of the png file as explained in the jQuery mobile buttonsbut this doesn't work.
到jQuery 移动按钮中解释的 png 文件的名称，但这不起作用。
回答by Jasper
You need to add a CSS rule for your new icon:
您需要为新图标添加 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:
更新：
You can also just make your CSS rule more specific than the jQuery Mobile rule like so:
你也可以让你的 CSS 规则比 jQuery Mobile 规则更具体，如下所示：
html .ui-icon-myapp-email {
...
}
That's about it, you should then be able to use this icon by referencing it like this:
就是这样，然后您应该能够通过像这样引用它来使用这个图标：
<li data-icon="myapp-email"><a href="#">MY LI!!!</a></li>
Note that the icon does not display if there is not a link in the lielement.
请注意，如果li元素中没有链接，则不会显示图标。
Here is a demo: http://jsfiddle.net/KYaQT/106/(Updated Link)
这是一个演示：http: //jsfiddle.net/KYaQT/106/（更新链接）
回答by appcropolis
In addition to the background-image you may want to modify the background-color and the size of the icon container. By default the icon is 18x18 pixels. If your icon is larger than that you will have to change the position and margins as well.
除了背景图像之外，您可能还想修改背景颜色和图标容器的大小。默认情况下，图标为 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;
}
回答by Ricardo Escobar Montecinos
I've solved this way, since I wanted to use svg files for my web app:
我已经通过这种方式解决了，因为我想为我的网络应用程序使用 svg 文件：
- put a class to the list you want to modify, "newlist" (in the case you want to modify certain lists, not all of the site)
- make disappear the icon:
.newlist span.ui-icon{display:none} - create the new icon class: "newicon", and
style{position:relative} - you can give the image as background or load it inside the div, i loaded it inside, since i wanted to put a different icon for everyone,
style{ position:absolute;width:24px;heigh;24px;right:10px;top:50%;margin-top:-12px;display:block} - put the div with the image inside after the
<a>element inside the<li>element
- 将一个类添加到您要修改的列表中，“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>元素之后
i used 24x24 pixels images
我使用了 24x24 像素的图像
