Vous avez trouvé ce tutoriel intéressant ? Recommandez le en cliquant sur le bouton +1

Ajouter, placer, personnaliser un icône sur un bouton

Tutoriel publié le 29 Décembre 2011 et mis à jour le 20 Janvier 2012

Ajouter des icônes aux boutons
Série d'icônes disponibles pour les boutons
Positionnement des icônes par rapport au texte du bouton
Icônes personnalisées
Icônes et thèmes

Ajouter des icônes aux boutons

Le framework jQuery Mobile comprend un ensemble prédéfini d'icônes le plus souvent nécessaire pour les applications mobiles. Afin de minimiser la taille du téléchargement, jQuery Mobile comprend un seul icône blanc sprite et ajoute automatiquement un cercle semi-transparent noir derrière l'icône afin d'assurer un excellent contraste sur n'importe quelle couleur de fond.

Un icône peut-être ajouté à un bouton en ajoutant l'attribut data-icon au lien et en spécifiant l'icône à afficher.

Exemple de code :

<a href="index.html" data-role="button"  data-icon="delete">Supprimer</a>

Série d'icônes disponibles pour les boutons

Les attributs data-icon suivants peuvent être référencés pour créer les icônes ci-dessous :

Flèche vers la gauche : arrow-l

Flèche vers la gauche - data-icon="arrow-l"

	<a href="index.html" data-role="button" data-icon="arrow-l">Mon bouton</a>

Flèche vers la droite : arrow-r

Flèche vers la droite - data-icon="arrow-r"

	<a href="index.html" data-role="button" data-icon="arrow-r">Mon bouton</a>

Flèche vers le haut : arrow-u

Flèche vers le haut - data-icon="arrow-u"

	<a href="index.html" data-role="button" data-icon="arrow-u">Mon bouton</a>

Flèche vers le bas : arrow-d

Flèche vers le bas - data-icon="arrow-d"

	<a href="index.html" data-role="button" data-icon="arrow-d">Mon bouton</a>

Supprimer : delete

Supprimer - data-icon="delete"

	<a href="index.html" data-role="button" data-icon="delete">Mon bouton</a>

Plus : plus

Plus - data-icon="plus"

	<a href="index.html" data-role="button" data-icon="plus">Mon bouton</a>

Moins : minus

Moins - data-icon="minus"

	<a href="index.html" data-role="button" data-icon="minus">Mon bouton</a>

Check : check

Check - data-icon="check"

	<a href="index.html" data-role="button" data-icon="check">Mon bouton</a>

Gear : gear

Gear - data-icon="gear"

	<a href="index.html" data-role="button" data-icon="gear">Mon bouton</a>

Rafraichir : refresh

Rafraichir - data-icon="refresh"

	<a href="index.html" data-role="button" data-icon="refresh">Mon bouton</a>

Avancer : forward

Avancer - data-icon="forward"

	<a href="index.html" data-role="button" data-icon="forward">Mon bouton</a>

Reculer : back

Reculer - data-icon="back"

	<a href="index.html" data-role="button" data-icon="back">Mon bouton</a>

Grille : grid

Grille - data-icon="grid"

	<a href="index.html" data-role="button" data-icon="grid">Mon bouton</a>

Etoile : star

Etoile - data-icon="star"

	<a href="index.html" data-role="button" data-icon="star">Mon bouton</a>

Alerte : alert

Alerte - data-icon="alert"

	<a href="index.html" data-role="button" data-icon="alert">Mon bouton</a>

Info : info

Info - data-icon="info"

	<a href="index.html" data-role="button" data-icon="info">Mon bouton</a>

Accueil : home

Accueil - data-icon="home"

	<a href="index.html" data-role="button" data-icon="home">Mon bouton</a>

Rechercher : search

Rechercher - data-icon="search"

	<a href="index.html" data-role="button" data-icon="search">Mon bouton</a>

Exemple récapitulatif

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Icônes pour boutons</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Icônes pour boutons</h1>
			</div><!-- /header -->
			<div data-role="content">
				<h2>Icône Flèche vers la gauche - data-icon="delete" :</h2>
				<a href="index.html" data-role="button" data-icon="arrow-l">Mon bouton</a>
				<h2>Icône Flèche vers la droite - data-icon="arrow-r" :</h2>
				<a href="index.html" data-role="button" data-icon="arrow-r">Mon bouton</a>
				<h2>Icône Flèche vers le bas - data-icon="arrow-u" :</h2>
				<a href="index.html" data-role="button" data-icon="arrow-u">Mon bouton</a>
				<h2>Icône Flèche vers le haut - data-icon="arrow-d" :</h2>
				<a href="index.html" data-role="button" data-icon="arrow-d">Mon bouton</a>
				<h2>Icône Supprimer - data-icon="delete" :</h2>
				<a href="index.html" data-role="button" data-icon="delete">Mon bouton</a>
				<h2>Icône Plus - data-icon="plus" :</h2>
				<a href="index.html" data-role="button" data-icon="plus">Mon bouton</a>
				<h2>Icône Moins - data-icon="minus" :</h2>
				<a href="index.html" data-role="button" data-icon="minus">Mon bouton</a>
				<h2>Icône Coché - data-icon="check" :</h2>
				<a href="index.html" data-role="button" data-icon="check">Mon bouton</a>
				<h2>Icône Roue crantée - data-icon="gear" :</h2>
				<a href="index.html" data-role="button" data-icon="gear">Mon bouton</a>
				<h2>Icône Rafraîchir - data-icon="refresh" :</h2>
				<a href="index.html" data-role="button" data-icon="refresh">Mon bouton</a>
				<h2>Icône Avancer - data-icon="forward" :</h2>
				<a href="index.html" data-role="button" data-icon="forward">Mon bouton</a>
				<h2>Icône Reculer - data-icon="back" :</h2>
				<a href="index.html" data-role="button" data-icon="back">Mon bouton</a>
				<h2>Icône Grille - data-icon="grid" :</h2>
				<a href="index.html" data-role="button" data-icon="grid">Mon bouton</a>
				<h2>Icône Étoile - data-icon="star" :</h2>
				<a href="index.html" data-role="button" data-icon="star">Mon bouton</a>
				<h2>Icône Alerte - data-icon="alert" :</h2>
				<a href="index.html" data-role="button" data-icon="alert">Mon bouton</a>
				<h2>Icône Info - data-icon="info" :</h2>
				<a href="index.html" data-role="button" data-icon="info">Mon bouton</a>
				<h2>Icône Accueil - data-icon="home" :</h2>
				<a href="index.html" data-role="button" data-icon="home">Mon bouton</a>
				<h2>Rechercher - data-icon="search" :</h2>
				<a href="index.html" data-role="button" data-icon="search">Mon bouton</a>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir un exemple : Exemples de boutons avec icônes intégrés.

Positionnement des icônes par rapport au texte du bouton

Icône positionné à gauche du texte

Par défaut, tous les icônes dans les boutons sont placés à la gauche du texte du bouton. On peut donc écrire :

	<a href="index.html" data-role="button" data-icon="delete">Supprimer</a>

	<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Supprimer</a>

Ce comportement par défaut peut être modifié en utilisant l'attribut data-iconpos pour positionner l'icône à la droite, au-dessus ou au-dessous du texte.

Icône positionné à droite du texte

L'icône peut également être positionné à droite du texte en précisant data-iconpos="right"

	<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Supprimer</a>

Icône positionné au-dessus du texte

L'icône peut également être positionné au-dessus du texte en précisant data-iconpos="top"

	<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Supprimer</a>

Icône positionné en-dessous du texte

Ou l'icône peut également être positionné en dessous du texte en spécifiant data-iconpos="bottom"

	<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Supprimer</a>

Icône sans texte

Vous pouvez également créer un bouton comportant uniquement un icône, en définissant l'attribut data-iconpos égal à notext. Le plugin bouton permet de masquer le texte à l'écran, mais il ajoute l'attribut title au lien pour fournir un contexte aux lecteurs d'écran et dispositifs supportant les info-bulles. Par exemple, en remplacant data-iconpos="right" dans l'exemple précédent par data-iconpos="notext" on obtient :

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Supprimer</a>

Exemple récapitulatif

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Position des icônes sur les boutons</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Position des icônes sur les boutons</h1>
			</div><!-- /header -->
			<div data-role="content">
				<h2>Icône Supprimer à droite - data-iconpos="right" :</h2>
				<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right">Supprimer</a>
				<h2>Icône Supprimer à gauche - data-iconpos="left" :</h2>
				<a href="index.html" data-role="button" data-icon="delete" data-iconpos="left">Supprimer</a>
				<h2>Icône Supprimer en haut - data-iconpos="top" :</h2>
				<a href="index.html" data-role="button" data-icon="delete" data-iconpos="top">Supprimer</a>
				<h2>Icône Supprimer en bas - data-iconpos="bottom" :</h2>
				<a href="index.html" data-role="button" data-icon="delete" data-iconpos="bottom">Supprimer</a>
				<h2>Icône sans texte - data-iconpos="notext" :</h2>
				<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Supprimer</a>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir un exemple : Exemple sur le positionnement des icônes dans le bouton.

Icônes personnalisées

Pour utiliser des icônes personnalisés, spécifiez une valeur data-icon qui a un nom unique, comme myapp-email et le plugin 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 alors écrire une règle CSS qui cible la classe ui-icon-myapp-email pour spécifier la source d'arrière plan de l'icône. Afin de maintenir une cohérence visuelle avec le reste des icônes, créez une icône blanche de 18x18 pixels enregistrées au format PNG-8 avec transparence alpha.

Dans cet exemple, nous pointons juste vers une image d'icône autonome, mais vous pourriez tout aussi bien utiliser une icône de sprite et préciser le positionnement à la place, tout comme le sprite icône que nous utilisons dans le framework.

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

Cela va créer l'icône avec une résolution standard, mais de nombreux appareils ont maintenant un affichage en très haute résolution, comme l'écran Retina de l'iPhone 4. Pour ajouter une icône HD, créez une icône qui est 36x36 pixels (exactement le double de la taille de 18 pixels), et ajoutez la deuxième règle qui utilise le média query -webkit-min-device-pixel-ratio: 2 pour cibler une seule règle d'affichage de haute résolution. Précisez l'image de fond pour le fichier d'icône HD et définissez la taille de fond à 18x18 pixels qui s'adaptera sur l'icône 36 pixels dans le même espace de 18 pixels. Le block du média query peut envelopper plusieurs règles d'icône :

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-myapp-email {
		background-image: url("app-icon-email-highres.png");
		background-size: 18px 18px;
	}
	/**
	 * d´autres règles d´icône HD ici
	 */
}

Icônes et thèmes

Le demi-cercle noir transparent derrière l'icône blanche assure un bon contraste sur n'importe quelle couleur de fond, de sorte qu'il fonctionne bien avec le système thématisation jQuery Mobile. Voici plusieurs exemples d'icônes identiques affichés à l'aide de différents thèmes.

Icônes échantillon "A"

<div data-role="controlgroup"  data-type="horizontal">
	<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">Mon bouton</a>
</div>

Icônes échantillon "B"

<div data-role="controlgroup"  data-type="horizontal">
	<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">Mon bouton</a>
</div>

Icônes échantillon "C"

<div data-role="controlgroup"  data-type="horizontal">
	<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
	<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">Mon bouton</a>
</div>

Exemple récapitulatif

<!DOCTYPE html> 
<html> 
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<title>Icônes pour boutons</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
		<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	</head> 
	<body> 
		<div data-role="page">
			<div data-role="header">
				<h1>Position des icônes sur les boutons</h1>
			</div><!-- /header -->
			<div data-role="content">
				/**
				 * Thème A
				 */
				<h2>Boutons groupés avec icônes et sans texte : <strong>Echantillon "A"</strong></h2>
				<div data-role="controlgroup"  data-type="horizontal">
					<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="a" data-inline="true">Mon Bouton</a>
				</div>
				
				/**
				 * Thème B
				 */
				<h2>Boutons groupés avec icônes et sans texte : <strong>Echantillon "B"</h2>
				<div data-role="controlgroup"  data-type="horizontal">
					<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="b" data-inline="true">Mon Bouton</a>
				</div>
				
				/**
				 * Thème C
				 */
				<h2>Boutons groupés avec icônes et sans texte : <strong>Echantillon "C"</h2>
				<div data-role="controlgroup"  data-type="horizontal">
					<a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
					<a href="index.html" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">Mon Bouton</a>
				</div>
			</div><!-- /content -->
			<div data-role="footer">
				<h4>Contenu du pied de page</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Voir un exemple : Exemples de boutons groupés avec icônes intégrés.

jQueryMobile pour mobiles smartphones tablettes

Icônes standards pour boutons jQueryMobile

Google Maps API Web Services

Ajouter, placer, personnaliser un icône sur un bouton

Ajouter des icônes aux boutons

Série d'icônes disponibles pour les boutons

Flèche vers la gauche : arrow-l

Flèche vers la droite : arrow-r

Flèche vers le haut : arrow-u

Flèche vers le bas : arrow-d

Supprimer : delete

Plus : plus

Moins : minus

Check : check

Gear : gear

Rafraichir : refresh

Avancer : forward

Reculer : back

Grille : grid

Etoile : star

Alerte : alert

Info : info

Accueil : home

Rechercher : search

Exemple récapitulatif

Positionnement des icônes par rapport au texte du bouton

Icône positionné à gauche du texte

Icône positionné à droite du texte

Icône positionné au-dessus du texte

Icône positionné en-dessous du texte

Icône sans texte

Exemple récapitulatif

Icônes personnalisées

Icônes et thèmes

Icônes échantillon "A"

Icônes échantillon "B"

Icônes échantillon "C"

Exemple récapitulatif