Webfont-Icons mit fester Breite

Sie müssen eine Reihe von Symbolen wie in einer Liste oder im Navigationsmenü vertikal ausrichten? Wir haben für diese Fälle ein Support-Styling mit fester Breite hinzugefügt.

Fügen Sie dem HTML-Element, das auf Ihr Symbol verweist, eine Klasse von fa-fw hinzu, um ein oder mehrere Symbole auf dieselbe feste Breite zu setzen. Dies ist großartig, wenn variierende Icon-Breiten verwendet werden (z. B. ein großes Bu-Skinnic-Icon auf einem breiten, aber kurzen Icon) würde die vertikale Ausrichtung wegwerfen. Im folgenden Beispiel haben wir zur besseren Übersichtlichkeit eine Hintergrundfarbe für das Symbol hinzugefügt, damit Sie die feste Breite sehen und die Schriftgröße des übergeordneten Elements erhöhen können.
Font Awesome


Übungsseite Icons mit fester Breite

Feste Breite

Home
Info
Library
Applications
Settings
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Übungsseite Icons mit fester Breite </title>
<!-- hier die CSS Datei für Fontawesome Webfont-Icons einbinden -->
<link href="css/all.min.css" rel="stylesheet">
</head>
<body>
<h3>Übungsseite Icons mit fester Breite</h3>
<div style="font-size: 2rem;">
<div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
<div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
<div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
<div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
<div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>
</div>
</body>
</html>