Erfahren Sie, wie die Icons von Font Awesome im Web einheitlich dargestellt werden und wie Sie sie an die Anforderungen Ihres Projekts anpassen können.
Um eine einheitliche Optik zu gewährleisten, wurden die Icons von Font Awesome mit einem quadratischen 20-Pixel-Raster gestaltet. Dieses Raster wird als „Icon-Leinwand“ verwendet und die Proportionen und Position der Icons werden entsprechend angepasst.
Standardmäßig werden alle Font Awesome Icons im Web mit einer festen Breite angezeigt, die die gesamte Icon-Leinwand ausfüllt. Die Icons werden optisch zentriert und mit ausgeglichenem Leerraum um sie herum platziert.
Diese Standardeinstellung ermöglicht eine einfache Ausrichtung bei der Verwendung von Icons in einer Liste oder in aufeinanderfolgenden vertikalen Linien. Auch horizontal nebeneinander platzierte Icons, z. B. in einer iconbasierten Navigation, werden mit einer einheitlichen Breite angezeigt.
<div>
<div><i class="fa-solid fa-bread-slice" style="background: LightSalmon;"></i> fa-bread-slice</div>
<div><i class="fa-solid fa-egg" style="background: LightSalmon;"></i> fa-egg</div>
<div><i class="fa-solid fa-cow" style="background: LightSalmon;"></i> fa-cow</div>
<div><i class="fa-solid fa-apple-whole" style="background: LightSalmon;"></i> fa-apple-whole</div>
<div><i class="fa-solid fa-broccoli" style="background: LightSalmon;"></i> fa-broccoli</div>
</div>
<!-- Symbolbasierte Steuerelemente mit einheitlicher Breite -->
<div class="fa-3x" style="display: flex; gap: 0.5rem;">
<i class="fa-solid fa-backward" style="background: LightSalmon;"></i>
<i class="fa-solid fa-play" style="background: LightSalmon;"></i>
<i class="fa-solid fa-forward" style="background: LightSalmon;"></i>
<i class="fa-solid fa-volume-xmark" style="background: LightSalmon;"></i>
<i class="fa-solid fa-volume-low" style="background: LightSalmon;"></i>
<i class="fa-solid fa-broccoli" style="background: LightSalmon;"></i>
<i class="fa-solid fa-volume-high" style="background: LightSalmon;"></i>
<i class="fa-solid fa-sliders" style="background: LightSalmon;"></i>
Fügen Sie dem HTML-Element, das auf Ihr Icon verweist, die Klasse „fa-width-auto“ hinzu, um die Breite nur auf das innere Symbol und nicht auf die gesamte Icon-Leinwand festzulegen. Dies ist ideal, wenn Sie keinen zusätzlichen Leerraum um ein Symbol herum wünschen oder es in den Text einfügen möchten.
<!-- Symbolbasierte Steuerelemente mit einheitlicher Breite -->
<div class="fa-3x" style="display: flex; gap: 0.5rem;">
<i class="fa-solid fa-exclamation fa-width-auto" style="background: LightSalmon;"></i>
<i class="fa-solid fa-circle-check fa-width-auto" style="background: LightSalmon;"></i>
<i class="fa-solid fa-input-numeric fa-width-auto" style="background: LightSalmon;"></i>
<i class="fa-solid fa-ruler-vertical fa-width-auto" style="background: LightSalmon;"></i>
<i class="fa-solid fa-ruler-horizontal fa-width-auto" style="background: LightSalmon;"></i>
<i class="fa-solid fa-airplay fa-width-auto" style="background: LightSalmon;"></i>
Wenn Sie alle Symbole mit der automatischen Breite statt der standardmäßigen festen Breite rendern möchten, haben Sie folgende Möglichkeiten:
Automatische Breite standardmäßig
Klasse für automatische Breite festlegen
Benutzerdefinierte CSS-Eigenschaften verwenden
Symbolhöhe und visueller Innenabstand
Zuschneideprobleme beim Innenabstand von Symbolen