Symbole in einer Liste

Wir bauten die vertikale Ausrichtung in unserem Design mit fester Breite auf und fügten einige nützliche Stile hinzu, um HTML-Listen mit Symbolen zu behandeln, die als dekorative Kugeln verwendet werden.

Verwenden Sie fa-ul und fa-li, um Standard-Aufzählungszeichen in ungeordneten Listen zu ersetzen. Im folgenden Beispiel haben wir eine Hintergrundfarbe für das Symbol hinzugefügt, damit Sie die feste Breite sehen und die Schriftgröße des Elternelement.
Font Awesome


Übungsseite:
Icons in einer Liste, ul ...

Symbole in einer Liste ul

  • Home
  • Info
  • Library
  • Applications
  • Settings
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite Symbole in einer Liste ul </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Übungsseite Symbole in einer Liste ul</h3>
<ul class="fa-ul">
<li><span class="fa-li"> <i class="fas fa-list style="background:MistyRose"></i></span> Home</li>
<li><span class="fa-li"> <i class="fas fa-list-alt style="background:MistyRose"></i></span> Info</li>
<li><span class="fa-li"> <i class="far fa-list-alt style="background:MistyRose"></i></span> Library</li>
<li><span class="fa-li"> <i class="fas fa-list-ol style="background:MistyRose"></i></span> Applications</li>
<li><span class="fa-li"> <i class="fas fa-list-ul style="background:MistyRose"></i></span> Settings</li>
</ul>
</body>
</html>


...und hier mit ol

Symbole in einer Liste ol

  1. Home
  2. Info
  3. Library
  4. Applications
  5. Settings
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite Symbole in einer Liste ol </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Übungsseite Symbole in einer Liste ol</h3>
<ol class="fa-ul">
<li><span class="fa-li"> <i class="fas fa-list style="background:MistyRose"></i></span> Home</li>
<li><span class="fa-li"> <i class="fas fa-list-alt style="background:MistyRose"></i></span> Info</li>
<li><span class="fa-li"> <i class="far fa-list-alt style="background:MistyRose"></i></span> Library</li>
<li><span class="fa-li"> <i class="fas fa-list-ol style="background:MistyRose"></i></span> Applications</li>
<li><span class="fa-li"> <i class="fas fa-list-ul style="background:MistyRose"></i></span> Settings</li>
</ol>
</body>
</html>