WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 303

Speichern Sie die Icons in einem Unterordner namens bilder . In Schritt zwei ergänzen
Sie nun die styles.css um folgende Klassen:

.ui-icon-menue {
background-image: url("../bilder/app-icon-menue-highres.png");
background-size: 18px 18px;
}
.ui-icon-anfahrt {
background-image: url("../bilder/app-icon-anfahrt-highres.png");
background-size: 18px 18px;
}
.ui-icon-kontakt {
background-image: url("../bilder/app-icon-kontakt-highres.png");
background-size: 18px 18px;
}

8

Listing 8.7 Austausch der Icons in der Navigationsleiste

Beachten Sie, dass auch in der Klassenbezeichnung nach .ui-icon- die von Ihnen in
den Dateinamen festgelegte Bezeichnung Verwendung findet. Innerhalb der Klassen
verknüpfen Sie jeweils die richtige Icon-Datei und setzen die Größe auf 18 × 18 Pixel.
Das Bild wird von jQuery Mobile als Hintergrundbild definiert, weswegen Sie die Grö-
ßenanpassung über die Definition background-size festlegen.

Als letzten Schritt binden Sie nun das richtige Icon ein. Ersetzen Sie einfach star
durch die von Ihnen festgelegte Bezeichnung. Im Großen und Ganzen sollte Ihr Code
nun wie folgt aussehen:

<div data-role="navbar" data-theme="b">
<ul>
<li><a href="menue.html" data-icon="menue" data-transition="fade">MENÜ</a>
</li>
<li><a href="anfahrt.html" data-icon="anfahrt" data-transition="fade">
ANFAHRT</a></li>
<li><a href="kontakt.html" data-icon="kontakt" data-transition="fade">KONTAKT
</a></li>
</ul>
</div><!-- /navbar -->

Listing 8.8 Die komplette Navigationsleiste

Damit sind Sie mit der Startseite durch und haben bereits das Grundgerüst für die
weitere Seiten gelegt (Abbildung 8.7). Sehr gut!