Icônes de bouton jQuery Mobile

La gamme d'icônes fournie par jQuery Mobile peut rendre vos boutons plus attrayants.

Ajouter des icônes aux boutons jQuery Mobile

Pour ajouter une icône à votre bouton, utilisez l'attribut data-icon :

<a href="#anylink" data-role="button" data-icon="search">Recherche</a>

Astuce :Vous pouvez également utiliser l'attribut data-icon sur les éléments <button> ou <input>.

Voici une liste des icônes disponibles fournis par jQuery Mobile :

Valeur de l'attribut Description Icône Exemple
data-icon="arrow-l" Flèche gauche Test
data-icon="arrow-r" Flèche droite Test
data-icon="delete" Supprimer Test
data-icon="info" Information Test
data-icon="home" Page d'accueil Test
data-icon="back" Retour Test
data-icon="search" Recherche Test
data-icon="grid" Grille Test

Pour des informations complètes sur les icônes de bouton jQuery Mobile, veuillez consulter notre Guide des icônes jQuery Mobile.

Positionner l'icône

Vous pouvez également définir l'emplacement où l'icône est placée : en haut, à droite, en bas ou à gauche.

Utilisez l'attribut data-iconpos pour définir la position :

Position de l'icône :

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">en haut</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">à droite</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">bas en bas</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Gauche</a>

Essayer vous-même

Astuce :Par défaut, les icônes de tous les boutons sont placées à gauche.

Affichage uniquement des icônes

Si vous ne souhaitez afficher que l'icône, veuillez définir data-iconpos sur "notext":

Retour:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Recherche</a>

Essayer vous-même