在jQuery Mobile中通过CSS类使用Icon

Question

我想在span元素上使用jQuery Mobile中的图标...我也想支持视网膜显示。那么我如何使用图标而不给我的跨度修复宽度？ 我应该使用媒体查询并试图让它以这种方式工作，还是有任何“官方方式”来做它？

此致 尼尔斯

Answer 1

以下是我在jQM中制作自定义图标的步骤。

你需要2x png的18x18而另一个是36x36

在你的css中：

//non-retina
.ui-icon-amazing {
    background-image: url("custom.png");
}

//retina
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .ui-icon-amazing {
        background-image: url("custom-hd.png");
        background-size: 18px 18px;
    }
}

要使用您称为“惊人”的新图标，只需使用相应的data-icon = attribute

即可

data-icon="amazing"

，图标将被应用。

你可以直接在你的样式表中获得base64编码你的png的奖励积分。