Пользовательский значок в мобильном заголовке JQuery

Question

Я пытаюсь использовать пользовательский значок в заголовке моего мобильного приложения JQuery.Конкретный значок, который я пытаюсь использовать, это просто значок «play» из Glyphish (http://glyphish.com/). Когда я пытаюсь использовать его в правой кнопке в заголовке, как показано здесь: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html, мой значок кажется страннымКажется, я не могу получить просто кнопку «play» в строке заголовка. Вот мой код:

<style type="text/css">
  .navbar .ui-btn .ui-btn-inner { padding-top: 40px !important; }
  .navbar .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; border-radius: 0 !important; }
  #custom .ui-icon{ background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px; }  
</style>

<div id="myPage" data-role="page" data-dom-cache="false">
    <div data-role="header">
        <h1>My Title</h1>
        <a id="play" href="#" data-icon="custom" data-iconpos="notext" class="ui-btn-right jqm-plus">Continue</a>
    </div>

    <div data-role="content">
    <!-- page content goes here -->
    </div>
</div>

Может кто-нибудь сказать, пожалуйста, как это исправить?

Answer 1

Измените имя CSS для пользовательского значка следующим образом

<style type="text/css">
  ... clipped... 
.ui-icon-custom
{ 
    background: url(/images/play.png) 50% 50% no-repeat; background-size: 24px 22px;  
}  

jQuery mobile добавляет 'ui-icon' к значению, которое вы указываете для атрибута data-icon для создания имени класса css. Так как ваш атрибут data-icon имеет значение 'custom'. Соответствующий класс css должен называться «.ui-icon-custom».

Ссылка: http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

Answer 2

В Jquery mobile есть возможность создавать пользовательские значки кнопок.Вот рабочий пример http://jsfiddle.net/codaniel/88kQu/1/

Ниже приведен фрагмент из http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

Чтобы использовать пользовательские значки, укажите значение значка данных с уникальным именем, например myapp-email и плагин кнопки сгенерируют класс, добавив префикс ui-icon- к значению data-icon и применив его к кнопке: ui-icon-myapp-email.

Затем вы можете написать правило CSSв вашей таблице стилей, которая нацелена на класс ui-icon-myapp-email, чтобы указать источник фона значка.Чтобы обеспечить визуальную согласованность с остальными значками, создайте белый значок 18x18 пикселей, сохраненный в формате PNG-8 с альфа-прозрачностью.

В этом примере мы просто указываем на отдельное изображение значка, но выможет так же легко использовать спрайт значков и указать вместо него позиционирование, точно так же, как спрайт значков, который мы используем в каркасе.

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}