CSS Pseudo-Elemente

Wenn Sie das HTML Ihres Projekts nicht ändern können oder lieber Ihr eigenes CSS schreiben möchten, können Sie CSS-Pseudoelemente verwenden, um mit Font Awesome, Icons zu einer Seite hinzuzufügen.

Bevor Sie Symbole als Pseudoelemente hinzufügen, stellen Sie sicher, dass Sie Font Awesome in Ihr Projekt integriert haben und CSS gut beherrschen.

Über Pseudoelemente

CSS verfügt über eine leistungsstarke Funktion namens Pseudoelemente , mit der Sie Inhalte visuell nur mit CSS zu einer Seite hinzufügen können. Die Verwendung von Strukturkonforme Pseudoelemente wie: ::before und ::after für das einbinden von Web Font Icons wird hier als bevorzugte Methode behandelt.

Syntax

selector::Pseudoelement {
Eigenschaft: Wert;
}

In diesem Beispiel wird das Icon .fa-user über das Pseudoelement ::before eingebunden.

  1. Definieren Sie ein gemeinsames CSS für alle Symbole.
  2. Erstellen Sie das CSS für das Symbole.
/* CSS für alle Icons - Diese Stile sind für eine zuverlässige Darstellung der Symbole erforderlich. */
.icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  }
  
/* CSS für das Icon - Stellen Sie sicher, dass Sie die korrekte Schriftdeklaration und den Unicode-Wert für das hinzuzufügende Symbol angeben. */
.fa-user::before {
    font: var(--fa-font-regular);
    font-size: 2em;
    content: "\f007";
  }

<!-- HTML -->
<span class="icon fa-user"></span>

Unicode-Wert eines Symbols finden

Jedes Symbol in Font Awesome hat einen eindeutigen Unicode-Wert. Diesen finden Sie in den Details zum jeweiligen Icon . Dort wird neben dem Namen und den Styles auch der Unicode angezeigt, den Sie in Ihrem CSS für content verwenden müssen.

Screenshot der Icon-Details von Font Awesome mit hervorgehobenem Unicode-Wert

Schriftdeklarationen (Font Families)

Je nach Icon-Style müssen Sie die passende Font Awesome Schrift deklarieren. Einige Varianten sind nur mit einer Pro-Lizenz verfügbar.

Style CSS Variable Lizenz
Solid var(--fa-font-solid) Kostenlos
Regular var(--fa-font-regular) Kostenlos
Brands var(--fa-font-brands) Kostenlos
Light var(--fa-font-light) Pro
Thin var(--fa-font-thin) Pro
Duotone var(--fa-font-duotone) Pro
Sharp var(--fa-font-sharp) Pro

Weiter Informationen