Icons zum Verschönern der Buttons bei jQuery Mobile
jQuery Mobile liefert eine große Auswahl an Icons mit, die bei Schaltflächen (Buttons) verwendet werden können und diesen ein schöneres Aussehen verleiht, aber auch die Nutzung verbessern kann, wenn die Icons passen gewählt werden.
Hier haben wir beispielsweise das typische Haussymbol, das i.d.R. für die Startseite verwendet wird. Sprich unsere Schaltfläche "Startseite" (auch englischen Seiten "home") wird zusätzlich zum Text mit dem Icon versehen.
Icons zu den Buttons hinzufügen unter jQuery Mobile
Um einer Schaltfläche einen Button hinzuzufügen können 2 Angaben gemacht werden:
- das gewünschte Icon (ohne diese Angabe geht es nicht)
- die Position des Icons
Beide Angaben erfolgen wieder durch das Erweitern der Klassen. Im folgenden Beispiel sehen wir, wie ein typischer Home-Button erstellt wird:
<a href="#seiteeins" class="ui-btn ui-icon-home ui-btn-icon-left">Startseite</a>

Klassenname Beschreibung
ui-icon-action Action (arrow arcing clockwise out of a box)
ui-icon-alert Exclamation mark inside a triangle
ui-icon-audio Sound / Speakers
ui-icon-arrow-d-l Down, left arrow
ui-icon-arrow-d-r Down, right arrow
ui-icon-arrow-u-l Up, left arrow
ui-icon-arrow-u-r Up, right arrow
ui-icon-arrow-l Left arrow
ui-icon-arrow-r Right arrow
ui-icon-arrow-u Up arrow
ui-icon-arrow-d Down arrow
ui-icon-back Back (curved arrow arcing counterclockwise upwards)
ui-icon-bars Three horizontal bars over each other
ui-icon-bullets Three horizontal bullets over each other
ui-icon-calendar Calendar
ui-icon-camera Camera
ui-icon-carat-d Down carat
ui-icon-carat-l Left carat
ui-icon-carat-r Right carat
ui-icon-carat-u Up carat
ui-icon-check Checkmark
ui-icon-clock Clock
ui-icon-cloud Cloud
ui-icon-comment Comment / Message
ui-icon-delete Delete
ui-icon-edit Edit / Pencil
ui-icon-eye Eye
ui-icon-forbidden Forbidden sign
ui-icon-forward Forward - (curved arrow arcing clockwise upwards)
ui-icon-gear Gear
ui-icon-grid Grid
ui-icon-heart Heart / Love symbol
ui-icon-home Home / House
ui-icon-info Information
ui-icon-location Location
ui-icon-lock Lock / Padlock
ui-icon-mail Mail / Letter
ui-icon-minus Minus sign
ui-icon-navigation Navigation
ui-icon-phone Telephone
ui-icon-power Power (On/off)
ui-icon-plus Plus sign
ui-icon-recycle Recycle sign
ui-icon-refresh Refresh - Circular arrow
ui-icon-search Search / Magnifying glass
ui-icon-shop Shop / Bag
ui-icon-star Star
ui-icon-tag Tag
ui-icon-user User / A person
ui-icon-video Video / Camera
Alle Buttons sind aufgelistet unter:
http://demos.jquerymobile.com/1.4.5/icons/
Platzierung der Icons
Die Ausrichtung der Icons erfolgt auch über die Erweiterung der Klassen.
<a href="#seiteeins" class="ui-btn ui-icon-home ui-btn-icon-top">Startseite</a>
Dazu stehen folgende Klassen zur Verfügung
ui-btn-icon-top
Icon wird über dem Text platziert
ui-btn-icon-right
Icon wird rechts vom Text platziert
ui-btn-icon-bottom
Icon wird unter dem Text platziert
ui-btn-icon-left
Icon wird links vom Text platziert
Nur ICON keinen Text bei einem Button
Soll die Schaltfläche nur ein Icon haben und keinen Text - einfach die Klasse ui-btn-icon-notext
nutzen.
Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).
Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button: