Wenn du in HTML eigene Icons einfügen möchtest, dann verwendest du dafür am besten Font Awesome. Dazu musst du zuerst eine CSS Datei in den Head Bereich deiner Webseite einfügen und kannst dann Icons mit HTML Codes einfügen. Wie das geht zeige ich dir in diesem Beitrag.
Icons mit Font Awesome in HTML ein:
Lade Font Awesome herunter:
- Gehe auf die Font Awesome Website: https://fontawesome.com/download
- Wähle die gewünschte Version (kostenlos oder Pro) und lade die CSS-Datei herunter.
- Extrahiere die heruntergeladene Datei und kopiere die CSS-Datei in dein Projekt.
Binde die CSS-Datei in deine HTML-Datei ein:
- Füge in den
<head>-Bereich deiner HTML-Datei einen Link zur CSS-Datei von Font Awesome ein.
HTML
<link rel="stylesheet" href="path/to/font-awesome.css">Füge das Icon mit HTML-Elementen und Font Awesome-Klassen ein:
- Verwende ein
<i>– oder ein<span>-Element, um das Icon zu platzieren. - Füge dem Element die Klasse
faund die Klasse für das gewünschte Icon hinzu. Den Icon-Namen findest du auf der Font Awesome Website.
HTML
<i class="fa fa-home"></i> <span class="fa fa-user"></span>Beachte:
- Du kannst die Font Awesome Website nutzen, um die verfügbaren Icons zu durchsuchen und deren Klassennamen zu finden: https://fontawesome.com/icons
- Achte darauf, dass die CSS-Datei von Font Awesome vor den benutzerdefinierten CSS-Dateien geladen wird, damit deine Anpassungen wirksam werden.
- Font Awesome bietet auch verschiedene andere Möglichkeiten, Icons in deine Website einzubinden, z. B. mit SVG-Sprites oder Web-Komponenten. Weitere Informationen findest du in der Font Awesome Dokumentation: https://fontawesome.com/docs
