jQuery Mobile-knappikoner

Ett fullt utbud av ikoner från jQuery Mobile kan göra dina knappar mer attraktiva.

Lägg till ikon till jQuery Mobile-knappar

För att lägga till en ikon till din knapp, använd egenskapen data-icon:

<a href="#anylink" data-role="button" data-icon="search">Sök</a>

Tips:Du kan också använda egenskapen data-icon i <button> eller <input>-element.

Nedan har vi listat några tillgängliga ikoner som jQuery Mobile erbjuder:

Egenskapsvärde Beskrivning Ikoner Exempel
data-icon="arrow-l" Vänsterpil Test
data-icon="arrow-r" Högerpil Test
data-icon="delete" Radera Test
data-icon="info" Information Test
data-icon="home" Hem Test
data-icon="back" Tillbaka Test
data-icon="search" Sök Test
data-icon="grid" Galleri Test

För fullständig information om jQuery Mobile-knappikoner, besök vår jQuery Mobile ikonreferenshandbok

Positionera ikon

Du kan också definiera var ikonen placeras: uppe, höger, ned eller vänster.

Använd egenskapen data-iconpos för att definiera position:

Ikonsposition:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">uppe</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">höger</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">ned</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Vänster</a>

Prova själv

Tips:Som standard placeras ikonerna till vänster i alla knappar.

Visa endast ikoner

Om du bara vill visa ikoner, sätt data-iconpos till "notext":

Tillbaka:

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

Prova själv