Использование пользовательских значков в мобильном списке jquery

Question

Я нашел документацию об использовании пользовательских значков для jQuery мобильных кнопок и о том, как настроить списки, используя существующие значки , но я не могу найти, как добавить пользовательские значки в представления списка ( то есть PNG, которые я создал сам).

Я попытался установить data-url:

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

к названию png-файла, как описано в мобильных кнопках jQuery , но это не работает.

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" (в случае, еслихотите изменить определенные списки, а не весь сайт)
• make исчезнет значок: .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 пикселей