Icone dei pulsanti jQuery Mobile

Il set di icone fornite da jQuery Mobile può rendere i tuoi pulsanti più attraenti.

Aggiungere icone ai pulsanti jQuery Mobile

Per aggiungere un'icona ai tuoi pulsanti, usa l'attributo data-icon:

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

Suggerimento:Puoi anche utilizzare l'attributo data-icon negli elementi <button> o <input>.

Di seguito elenchiamo alcune icone disponibili fornite da jQuery Mobile:

Valore dell'attributo Descrizione Icona Esempio
data-icon="arrow-l" Freccia sinistra Test
data-icon="arrow-r" Freccia destra Test
data-icon="delete" Elimina Test
data-icon="info" Informazioni Test
data-icon="home" Pagina iniziale Test
data-icon="back" Torna indietro Test
data-icon="search" Ricerca Test
data-icon="grid" Griglia Test

Per informazioni complete sulle icone dei pulsanti jQuery Mobile, visita il nostro Manuale di riferimento delle icone jQuery Mobile.

Posizionare l'icona

Puoi anche determinare la posizione in cui l'icona viene posizionata: in alto, a destra, in basso o a sinistra.

Puoi utilizzare l'attributo data-iconpos per determinare la posizione:

Posizione dell'icona:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">cima</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">destra</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">sotto</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Sinistra</a>

Prova da solo

Suggerimento:Per default, tutte le icone nei pulsanti sono posizionate a sinistra.

Mostra solo l'icona

Se si desidera visualizzare solo l'icona, impostare data-iconpos su "notext":

Indietro:

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

Prova da solo