Используйте Icon через CSS класс в jQuery Mobile

Question

Я хочу использовать значок в jQuery Mobile для элемента span ... и я хочу поддерживать отображение Retina. Так, как я могу использовать значок, не давая моему диапазону фиксированную ширину? Должен ли я использовать Media Queries и попытаться заставить его работать таким образом, или есть какой-то "официальный способ" сделать это?

С уважением Nils

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 непосредственно в таблицу стилей.