Icône personnalisée dans l'en-tête de JQuery Mobile

Question

J'essaie d'utiliser une icône personnalisée dans l'en-tête de mon application JQuery Mobile. L'icône spécifique que j'essaie d'utiliser est simplement l'icône "play" de Glyphish (http://glyphish.com/). Lorsque j'essaie de l'utiliser dans le bouton droit de l'en-tête, comme indiqué ici : http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/docs-headers.html mon icône apparaît toute bizarre. Je n'arrive pas à obtenir un simple bouton "play" dans ma barre d'en-tête. Voici mon code :

<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>

Quelqu'un peut-il me dire comment réparer cela ?

Answer 1

Modifiez le nom CSS de l'icône personnalisée comme suit

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

jQuery mobile ajoute "ui-icon" à la valeur que vous fournissez pour l'attribut data-icon afin de construire le nom de la classe css. Puisque votre attribut data-icon a la valeur 'custom'. La classe css correspondante devrait s'appeler '.ui-icon-custom'.

Réf : http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

Answer 2

Jquery mobile permet de créer des icônes de bouton personnalisées. Voici un exemple fonctionnel http://jsfiddle.net/codaniel/88kQu/1/

Ce qui suit est un extrait de http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-icons.html

Pour utiliser des icônes personnalisées, spécifiez une valeur data-icon qui a un nom unique comme myapp-email et le plugin de bouton générera une classe en préfixant ui-icon- à la valeur data-icon et l'appliquera au bouton : ui-icon-myapp-email.

Vous pouvez ensuite écrire une règle CSS dans votre feuille de style qui cible la classe ui-icon-myapp-email pour spécifier la source de l'arrière-plan de l'icône. Pour maintenir une cohérence visuelle avec le reste des icônes, créez une icône blanche de 18x18 pixels enregistrée au format PNG-8 avec une transparence alpha.

Dans cet exemple, nous ne faisons que pointer vers une image d'icône autonome, mais vous pouvez tout aussi bien utiliser un sprite d'icône et spécifier le positionnement à la place, tout comme le sprite d'icône que nous utilisons dans le framework.

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