Symbole in einer Liste

Font Awesome hat einige nützliche Styling-Funktionen für HTML-Listen mit Symbolen als dekorative Aufzählungszeichen hinzugefügt.

Hier werden die Grundlagen zum Ersetzen von Standardaufzählungszeichen durch Symbole in ungeordneten Listen erläutert, und es werden Optionen zur Anpassung von CSS-Eigenschaften vorgestellt.

Viele moderne Navigationsleisten und Seitenmenüs nutzen Listen als Strukturgrundlage. Icons helfen, Inhalte schneller visuell zu erfassen.

Verwenden Sie fa-ul und fa-li, um Standardaufzählungszeichen in ungeordneten Listen zu ersetzen.

  • Listensymbole können
  • verwendet werden
  • um Aufzählungszeichen in
  • Listen zu ersetzen
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listensymbole können</li>
<li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>verwendet werden</li>
<li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>um Aufzählungszeichen in</li>
<li><span class="fa-li"><i class="fa-regular fa-square"></i></span>Listen zu ersetzen</li>
</ul>

Sie können die Semantik einer geordneten Liste <ol> auch im Hintergrund beibehalten, Aufzählungszeichen jedoch visuell verwenden.

  1. Listensymbole können
  2. verwendet werden
  3. um Aufzählungszeichen in
  4. Listen zu ersetzen
<ol class="fa-ul">
<li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listensymbole können</li>
<li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>verwendet werden</li>
<li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>um Aufzählungszeichen in</li>
<li><span class="fa-li"><i class="fa-regular fa-square"></i></span>Listen zu ersetzen</li>
</ol>
Listen Klassen
Klasse Beschreibung
fa-ul Wird bei <ul>- oder <ol>-Elementen verwendet, um Symbole als Aufzählungszeichen zu formatieren
fa-li Wird bei einzelnen <li>-Elementen verwendet, um Symbole als Listenaufzählungszeichen zu formatieren
Icons in einer Liste + Logische Eigenschaften

Das Styling von Icons in einer Liste basiert auf logischen CSS-Eigenschaften, um die Verwendung von Icons in möglichst vielen Schreibweisen und Sprachen zu unterstützen.

Mehr Informationen

Definieren Sie Ihre eigenen Werte um die Standardeinstellungen von Font Awesome zu überschreiben und anzupassen.

Anpassen von Listeneigenschaften
Benutzerdefinierte CSS-Eigenschaften
Verwenden von benutzerdefinierter Eigenschaften in einem Projekt