Sonstiges

Icons

Der einfachste Weg Icons auf Webseiten zu verwenden ist das Einbinden von Icon-Bibliotheken. Das Einbinden einer Icon-Bibliothek erfolgt mit dem „link“-Element im „head“-Bereich der Webseite. Das Anzeigen von Icons erfolgt dann mit Hilfe von Inline-Elementen und dem „class“-Attribut:

Zu den drei bekanntesten Anbietern von Icon-Bibliotheken zählen:

Font Awesome: http://fontawesome.io/icons/
Bootstrap: http://getbootstrap.com/components/
Google: https://material.io/icons/

Icon-Bibliothek von „Font Awesome“

Die Icon-Bibliothek von „Font Awesome“ kann mit folgendem Link eingebunden werden:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Im „class“-Attribut eines Inline-Elements werden dann die Basisklasse für die „Font Awesome“-Icons („fa“) und die Klasse des entsprechenden Icons (z. B. „fa-cloud“) angegeben.

Die Größe der Icons kann durch Angabe einer dritten Klasse, welche die Größenanpassung vornimmt, verändert werden:

fa-lg: 33% größer
fa-2x: 2-fach
fa-3x: 3-fach
fa-4x: 4-fach
fa-5x: 5-fach

Die Farbe der Icons kann mit der CSS-Eigenschaft „color“ definiert werden:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Icon-Bibliothek von „Bootstrap“

Die Icon-Bibliothek von Bootstrap kann mit folgendem Link eingebunden werden:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Im „class“-Attribut wird die Basisklasse der Bootstrap-Icons („glyphicon“) und die Klasse des entsprechenden Icons (z. B. „glyphicon-cloud) angegeben.

Bei den Bootstrap-Icons kann die Icon-Größe mit Hilfe der CSS-Eigenschaft „font-size“ definiert werden und die Farbe mit der CSS-Eigenschaft „color“:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Icon-Bibliothek von „Google“

Die Icon-Bibliothek von Google kann mit folgendem Link eingebunden werden:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Bei dem Google-Icons wird im „class“-Attribut nur die Basis-Klasse der Google-Icons („material-icons“) angegeben. Die Klasse des entsprechenden Icons wird hier im Element-Inhalt angegeben.

Größenangaben werden über Unterklassen der Basis-Klasse, mit Hilfe der CSS-Eigenschaft „font-size“ definiert. Das funktioniert nicht in den eigentlichen Klassen der jeweiligen Icons.

Die Farbe kann mit Hilfe der CSS-Eigenschaft „color“ definiert werden:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Image-Sprites

Bei Image-Sprites werden mehrere Bilder zu einem zusammengefasst, was Zeit und Datenvolumen beim Seitenaufbau spart.

Für das folgende Beispiel wird folgende Emoji-Liste verwendet:

Mit Hilfe eines „img“-Elements soll nun eines der Emojis angezeigt werden. Da das „src“-Attribut des „img“-Elements nicht leer sein darf, muss hier ein transparentes Bild ausgewählt werden. Außerdem wird hier mit dem „id“-Attribut auf einen ID-Selektor verwiesen:

In der CSS-Datei wird dann mit Hilfe einer CSS-Deklaration die Breite und Höhe des Bildausschnitts sowie das Bild und die Position des Bildausschnitts im Gesamtbild angegeben. Dabei entspricht „0 0“ der oberen linken Ecke. Mit negativen Werten wird die Position nach unten rechts verschoben:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

CSS-Eigenschaft „clip“

Mit der CSS-Eigenschaft „clip“ können Bildausschnitte angezeigt werden. Anders als bei den Image-Sprites wird jedoch der Platz für das gesamt Bild reserviert, aber nur ein Teil dargestellt. Dabei kann „clip“ die Werte „rect()“ und „auto“ annehmen.

Mit „rect()“ kann der gewünschte Bildausschnitt als Rechteck definiert werden. Dabei müssen vier Werte in der Klammer von „rect()“ angegeben werden. Die vier Werte entsprechen den Abständen der vier Seiten des Rechtecks von der oberen linken Ecke des Gesamtbildes in der Reihenfolge oben, rechts, unten, links:

Mit dem Wert „auto“ für die Eigenschaft „clip“ kann das gesamte Bild dargestellt werden:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Zähler

Mit Hilfe von CSS-Zählern können Elemente automatisch durchnummeriert werden. Mit der CSS-Eigenschaft „counter-reset“ kann ein Zähler zurückgesetzt werden. Mit der CSS-Eigenschaft „counter-increment“ kann ein Zähler um eins erhöht werden. Mit der Funktion „counter()“ zusammen mit den Pseudo-Elementen „::before“ oder „::after“ kann dann der Zähler zu einem Element hinzugefügt werden:

CSS-Datei:

HTML-Datei:

Ergebnis im Browser:

Mit der Funktion „counters()“ können auch verschachtelte Elemente automatisch durchnummeriert werden, ohne dass die Tiefe der Verschachtelung vorher definiert werden muss:

CSS-Datei: