Bevor es losgehen kann

Stellen Sie sicher, dass Sie:
Font Awesome mit einer der beiden Möglichkeiten in Ihrem Projekt eingerichtet haben.

Einbinden mit Font Awesome Kit:
- Font Awesome Kits sind der einfachste Weg, Font Awesome-Symbole in Ihre Projekte zu integrieren. Erstellen Sie einfach ein neues Font Awesome Kit und fügen Sie den Kit-Einbettungscode in den Kopf jeder Vorlage oder Seite Ihres Projekts ein, auf der Sie Symbole hinzufügen möchten.

Beispiel mit Font Awesome - Kit

Email-Adresse registrieren
Link kopieren und in Ihre Seite einfügen

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aussagekräftiger Titel der Seite</title>
<link rel="stylesheet" href="https://kit.fontawesome.com/bef3aa7cba.css" crossorigin="anonymous">
</head>

<body>
<!-- Hier der Inhalt ihrer Seite -->
</body>
</html>

Einrichtung mit Webfonts:
1. Im Font Awesome-Download-Paket finden Sie die benötigten Dateien. Der Ordner /css enthält die wichtigsten Stile und Dienstprogramme für alle Font Awesome-Familien- und Stiloptionen. Der Ordner /webfonts enthält alle Schriftartdateien, von denen die CSS-Dateien abhängen.

Beispiel mit Font Awesome - Download

Öffnen Sie die Downloadseite von Font Awesome
Wählen Sie die Free-Version von Font Awesome oder wenn die Pro sind dann die Pro-Version
Entpacken Sie den Download in Ihren Projektordner
Legen Sie im <head> Ihrer Projektseite den Pfad zur CSS von Font Awesome fest

<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aussagekräftiger Titel der Seite</title>
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
</head>

<body>
<!-- Hier der Inhalt ihrer Seite -->
</body>
</html>

Die folgende Ordnerstruktur zeigt eine empfohlene Ablage der Font Awesome-Dateien. So finden CSS und Webfonts zuverlässig zueinander.

Beispiel für eine mögliche Ordnerstruktur

projektordner
- css
  - fontawesome
    - css
      - all.css
      - all.min.css
      - ....css
    - webfonts
      - fa-regular-400.ttf
      - fa-regular-400.woff2
      - fa-solid-900.ttf
      - fa-solid-900.woff2
      - ....ttf
      - ....woff2

Style Basics

Font Awesome-Symbole übernehmen automatisch CSS-Größe und -Farbe (wie in den Beispielen unten zu sehen). Das bedeutet, dass sie sich überall, wo Sie sie platzieren, in den Text einfügen. Font Awesome versucht, nicht zu eigensinnig zu sein und legt nur die grundlegenden Stilregeln fest, die für eine korrekte Darstellung der Symbole im Kontext erforderlich sind.