jQuery Mobile Symbole
Wir können Symbolklassen verwenden, um Symbole zu <a>- und <button>-Elementen in jQuery Mobile hinzuzufügen und die Symbole wie folgt zu positionieren:
<a href="../index.html" class="ui-btn ui-icon-refresh ui-btn-icon-left">Seite aktualisieren</a>Ausprobieren
<button class="ui-btn ui-icon-refresh ui-btn-icon-left">Seite aktualisieren</button>Ausprobieren
Um einem <input>-Button ein Symbol hinzuzufügen, können Sie das data-icon-Attribut verwenden:
<a href="../index.html" data-icon="refresh">Seite aktualisieren</a>Ausprobieren
Wir können das data-icon-Attribut verwenden, um Symbole zu Navigations-Buttons hinzuzufügen:
<a href="../index.html" data-icon="refresh">Seite aktualisieren</a>Ausprobieren
Um einem Listen-Button ein Symbol hinzuzufügen, können Sie das data-icon-Attribut innerhalb von <li> verwenden:
<li data-icon="refresh">Klick michAusprobieren
Nachfolgend listen wir alle verfügbaren Icons auf, die jQuery Mobile bereitstellt:
| Wert | Beschreibung | Icon | Beispiel |
|---|---|---|---|
| action | Aktion | Ausprobieren | |
| alert | Warnung | Ausprobieren | |
| Audio | Video / Audio / Lautsprecher | Ausprobieren | |
| arrow-d-l | Unten links | Ausprobieren | |
| arrow-d-r | Unten rechts | Ausprobieren | |
| arrow-u-l | Oben links | Ausprobieren | |
| arrow-u-r | Oben rechts | Ausprobieren | |
| arrow-l | Pfeil nach links | Ausprobieren | |
| arrow-r | Pfeil nach rechts | Ausprobieren | |
| arrow-u | Pfeil nach oben | Ausprobieren | |
| arrow-d | Pfeil nach unten | Ausprobieren | |
| back | Zurück | Ausprobieren | |
| bars | Column | Ausprobieren | |
| bullets | Bars | Ausprobieren | |
| calendar | Kalender | Ausprobieren | |
| camera | Kamera | Ausprobieren | |
| carat-d | Down | Ausprobieren | |
| carat-l | Left | Ausprobieren | |
| carat-r | Rechts | Ausprobieren | |
| carat-u | Nach oben | Ausprobieren | |
| check | Häkchen | Ausprobieren | |
| Uhr | Uhr | Ausprobieren | |
| Wolke | Cloud | Ausprobieren | |
| Kommentar | Kommentar | Ausprobieren | |
| Löschen | Löschen (X) | Ausprobieren | |
| edit | Bearbeiten / Bleistift | Ausprobieren | |
| Auge | Auge | Ausprobieren | |
| Verboten | Verbotsschild | Ausprobieren | |
| Vorwärts | Vorwärts | Ausprobieren | |
| Zahnrad | Zahnrad | Ausprobieren | |
| grid | Grid | Ausprobieren | |
| Herz | Herz / Liebessymbol | Ausprobieren | |
| Startseite | Startseite (Homepage) | Ausprobieren | |
| Info | Info | Ausprobieren | |
| location | Standort / GPS | Ausprobieren | |
| lock | Schloss / Vorhängeschloss | Ausprobieren | |
| Mail / Umschlag | Ausprobieren | ||
| minus | Zeichen, Minus | Ausprobieren | |
| Navigation | Navigation | Ausprobieren | |
| phone | Telefon | Ausprobieren | |
| Potenz | Schalter (Ein/Aus) | Ausprobieren | |
| plus | Plus | Ausprobieren | |
| recyceln | Recyceln | Ausprobieren | |
| refresh | Aktualisieren | Ausprobieren | |
| search | Suche | Ausprobieren | |
| Shop | Shop, Geldbörse, Handtasche | Ausprobieren | |
| star | Star | Ausprobieren | |
| -Tag hinzu | Tag | Ausprobieren | |
| user | Benutzer | Ausprobieren | |
| video | Videokamera | Ausprobieren |