jQuery Icons
Pour ajouter une icône à votre <a> et <button> éléments dans jQuery Mobile, utilisez la classe d'icône et de positionner l'icône comme illustré ci - dessous (la seule exception est les boutons dans navbars, qui sont présentées plus bas):
<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</a>
Try it
<button class="ui-btn ui-icon-refresh ui-btn-icon-left ">Refresh Page</button>
Try it
Pour ajouter une icône à votre <input> boutons, utilisez les data-icon attribut:
<input type="button" value="Refresh page" data-icon="refresh" >
Try it
Pour ajouter une icône à vos boutons de la barre de navigation, utilisez l'attribut data-icon:
<a href="#anylink" data-icon="refresh" >Refresh Page</a>
Try it
Pour ajouter une icône à vos boutons de la liste, utilisez l'attribut data-icône sur <li> :
<li data-icon="refresh" ><a href="#">Click me</a></li>
Try it
Ci-dessous, nous avons répertorié toutes les icônes disponibles que jQuery Mobile fournit:
| Valeur | La description | Icône | Exemple |
|---|---|---|---|
| action | Action (flèche pointant vers la droite d'une boîte) | Essayez - le | |
| alert | alert | Essayez - le | |
| audio | Audio / Son / Haut-parleurs | Essayez - le | |
| arrow-d-l | Flèche pointant vers le bas vers la gauche | Essayez - le | |
| arrow-d-r | Flèche pointant vers le bas vers la droite | Essayez - le | |
| arrow-u-l | Flèche vers le haut vers la gauche | Essayez - le | |
| arrow-u-r | Flèche vers le haut vers la droite | Essayez - le | |
| arrow-l | Flèche pointant vers la gauche | Essayez - le | |
| arrow-r | Flèche pointant vers la droite | Essayez - le | |
| arrow-u | Flèche pointant vers le haut | Essayez - le | |
| arrow-d | Flèche vers le bas | Essayez - le | |
| back | Retour (flèche courbe pointant vers le haut dans le sens antihoraire) | Essayez - le | |
| bars | Bars (trois barres horizontales sur l'autre) | Essayez - le | |
| bullets | Balles (trois balles horizontales sur l'autre) | Essayez - le | |
| calendar | calendar | Essayez - le | |
| camera | camera | Essayez - le | |
| carat-d | Carat pointant vers le bas | Essayez - le | |
| carat-l | Carat pointant vers la gauche | Essayez - le | |
| carat-r | Carat pointant vers la droite | Essayez - le | |
| carat-u | Carat pointant vers le haut | Essayez - le | |
| check | Coche | Essayez - le | |
| clock | clock | Essayez - le | |
| cloud | cloud | Essayez - le | |
| comment | comment | Essayez - le | |
| delete | Supprimer (X) | Essayez - le | |
| edit | Modifier / Crayon | Essayez - le | |
| eye | eye | Essayez - le | |
| forbidden | signe interdite | Essayez - le | |
| forward | forward | Essayez - le | |
| gear | gear | Essayez - le | |
| grid | grid | Essayez - le | |
| heart | Coeur / symbole de l'amour | Essayez - le | |
| home | home | Essayez - le | |
| info | Information | Essayez - le | |
| location | Localisation / GPS | Essayez - le | |
| lock | Verrouiller / Cadenas | Essayez - le | |
| Courrier / Lettre | Essayez - le | ||
| minus | minus | Essayez - le | |
| navigation | navigation | Essayez - le | |
| phone | Téléphone | Essayez - le | |
| power | Marche / arrêt) | Essayez - le | |
| plus | plus | Essayez - le | |
| recycle | recycle | Essayez - le | |
| refresh | refresh | Essayez - le | |
| search | search | Essayez - le | |
| shop | Boutique / Pag / Purse | Essayez - le | |
| star | star | Essayez - le | |
| tag | tag | Essayez - le | |
| user | Utilisateur / personne | Essayez - le | |
| video | Caméra vidéo | Essayez - le |