Appearance
Kapitel 23: Icon-Fonts**
📐 Lernziel: Meistern Sie Icon-Fonts, um Vektorgrafiken zu verwenden, die verlustfrei skaliert werden können.
23.1 Vorteile von Icon-Fonts
💡 Was sind Icon-Fonts?
Icon-Fonts sind Vektorgrafiken, die wie Text behandelt werden. Sie sind tatsächlich Schriftarten, die Symbole statt Buchstaben enthalten.
✅ Vorteile von Icon-Fonts
| Vorteil | Erklärung |
|---|---|
| Vektorgrafik | Werden beliebig vergrößert, ohne unscharf zu werden |
| Farbe änderbar | Wie Textfarbe mit color änderbar |
| Größe änderbar | Wie Schriftgröße mit font-size änderbar |
| Leichtgewichtig | Dateigröße ist sehr klein |
| CSS-steuerbar | Können mit CSS (Schatten, Drehung, etc.) gestylt werden |
❌ Vergleich mit normalen Bildern
| Icon-Fonts | Normale Bilder | |
|---|---|---|
| Vergrößerung | Bleibt scharf | Wird unscharf |
| Farbe ändern | Einfach (color) | Schwierig (neues Bild nötig) |
| Größe ändern | Einfach (font-size) | Schwierig (neues Bild nötig) |
| Dateigröße | Klein | Größer |
23.2 Häufige Icon-Font-Bibliotheken
🎯 Beliebte Icon-Font-Bibliotheken
| Bibliothek | Beschreibung | Website |
|---|---|---|
| Font Awesome | Am beliebtesten, kostenlos, einfach zu verwenden | fontawesome.com |
| Material Icons | Googles Icon-Set, sauber und modern | fonts.google.com/icons |
| Iconfinder | Hochwertige Icons (teilweise kostenpflichtig) | iconfinder.com |
🎯 Warum Font Awesome?
- ✅ Kostenlos (Free-Version hat genug Icons für Anfänger)
- ✅ Einfach zu verwenden (nur CSS einbinden)
- ✅ Große Auswahl (Hunderte Icons)
- ✅ Aktiv gepflegt (regelmäßige Updates)
23.3 Verwendung von Icon-Fonts
📝 Schritt 1: Font Awesome in HTML einbinden
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Font Awesome Beispiel</title>
<!-- Font Awesome CDN einbinden -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Icon verwenden -->
<i class="fas fa-home"></i> Startseite
</body>
</html>Erklärung:
<link>- Bindet die Font Awesome CSS-Datei ein<i class="fas fa-home"></i>- Zeigt ein Haus-Icon anfas- Font Awesome Solid (Stil)fa-home- Icon-Name (Haus)
📝 Schritt 2: Icon größer/kleiner machen
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Icon-Größe</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.großes-icon {
font-size: 48px; /* Icon vergrößern */
}
</style>
</head>
<body>
<i class="fas fa-home großes-icon"></i>
</body>
</html>📝 Schritt 3: Icon-Farbe ändern
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Icon-Farbe</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.rotes-icon {
color: red; /* Icon rot färben */
}
</style>
</head>
<body>
<i class="fas fa-home rotes-icon"></i>
</body>
</html>Erklärung:
- Da Icons wie Text behandelt werden, können Sie
colorverwenden, um die Farbe zu ändern!
23.4 Praxis: Navigationsleisten-Icons, Button-Icons, Hinweis-Icons
🎨 Praxis 1: Navigationsleiste mit Icons
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Navigationsleiste mit Icons</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
nav {
background-color: #333;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin-right: 20px;
}
nav a i {
margin-right: 5px; /* Abstand zwischen Icon und Text */
}
</style>
</head>
<body>
<nav>
<a href="#"><i class="fas fa-home"></i> Startseite</a>
<a href="#"><i class="fas fa-user"></i> Über uns</a>
<a href="#"><i class="fas fa-envelope"></i> Kontakt</a>
</nav>
</body>
</html>🎨 Praxis 2: Schaltfläche mit Icon
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Schaltfläche mit Icon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.download-button {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
.download-button i {
margin-right: 8px; /* Abstand zwischen Icon und Text */
}
</style>
</head>
<body>
<button class="download-button">
<i class="fas fa-download"></i> Herunterladen
</button>
</body>
</html>🎨 Praxis 3: Hinweis-Icon
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Hinweis-Icon</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
.hinweis {
background-color: #f0f0f0;
padding: 15px;
border-left: 4px solid #ff9800;
}
.hinweis i {
color: #ff9800;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="hinweis">
<i class="fas fa-exclamation-triangle"></i>
Achtung! Dies ist eine wichtige Nachricht.
</div>
</body>
</html>✅ Zusammenfassung
In diesem Kapitel haben Sie gelernt:
- ✅ Vorteile von Icon-Fonts - Vektorgrafik, farb-/größenänderbar
- ✅ Häufige Bibliotheken - Font Awesome, Material Icons
- ✅ Verwendung - Einbinden, Größe/Farbe ändern
- ✅ Praxis - Navigationsleisten, Schaltflächen, Hinweise
🎯 Übung
Übung 1: Erstellen Sie eine Navigationsleiste mit Icons.
Übung 2: Erstellen Sie eine Schaltfläche mit einem Icon.
Übung 3: Erstellen Sie einen Hinweis-Kasten mit einem Warn-Icon.
📚 Nächstes Kapitel
Im nächsten Kapitel lernen wir Formularverschönerung (Formular-Verschönerung), um Formulare benutzerfreundlicher zu gestalten.
[Weiter zu Kapitel 24: Formular-Verschönerung →]