Icons mit Rahmen
Gelegentlich möchten Sie vielleicht ein Symbol mit einem Rahmen optisch hervorheben.
Um einen Rahmen um ein Symbol zu erzeugen hält Font Awesome die CSS Klasse .fa-border bereit.
Die .fa-border-Klasse, die Font Awesomew in früheren Versionen verwendet hat, funktioniert auch in Version 7 noch. Font Awesome hat sich jedoch entschieden, die CSS Klasse in Version "Font Awesome 8", nicht mehr zu unterstützen.
<i class="fa-solid fa-arrow-right fa-border"></i>
<i class="fa-solid fa-users fa-border"></i>
<i class="fa-solid fa-arrow-left fa-border"></i>
Anpassungen
Font Awesome hat benutzerdefinierte CSS-Eigenschaften hinzugefügt, um die Anpassung einfacher und effizienter zu gestalten. Definieren Sie Ihre eigenen Werte für die folgenden Eigenschaften, um die Standardeinstellungen von Font Awesome zu überschreiben und anzupassen.
| CSS-Eigenschaften | Beschreibung | Akzeptierte Werte |
|---|---|---|
--fa-border-style |
legt den Rahmenstil fest | Jeder gültige CSS-Rahmenstilwert |
--fa-border-width |
legt die Breite des Rahmens fest | Jeder gültige CSS-Rahmenbreitenwert |
--fa-border-color |
legt die Rahmenfarbe fest | Jeder gültige CSS-Rahmenfarbwert |
--fa-border-radius |
rundet die Ecken des äußeren Rahmens ab | Jeder gültige CSS-Rahmenradiuswert |
--fa-border-padding |
legt den inneren Abstand um das Symbol fest | Jeder gültige CSS-Padding-Wert |
--fa-border-margin |
legt den äusseren Abstand um das Symbol fest | Jeder gültige CSS-Margin-Wert |
Für globale CSS-Werte sind eigens dafür vorgesehene Klassen anzulegen und ausschließlich innerhalb dieser anzupassen. Auf diese Weise wird sichergestellt, dass nicht sämtliche Icons unbeabsichtigt von den Änderungen betroffen sind
CSS-Beispiel
<!doctype html>
<html>
<head>
<title>Beispiel 1</title>
<style>
.fa-border-dotted {
--fa-border-style: dotted;
--fa-border-width: 7px;
--fa-border-color: tomato;
--fa-border-radius: 0;
--fa-border-padding: 0.125em;
border-style: var(--fa-border-style);
border-width: var(--fa-border-width);
border-color: var(--fa-border-color);
border-radius: var(--fa-border-radius);
padding: var(--fa-border-padding);
}
</style>
</head>
<body>
<h1>Beispiel 1</h1>
<div class="fa-3x" style="display: flex; gap: 0.5em;">
<i class="fa-solid fa-arrow-right fa-border-dotted"></i>
</div>
</body>
</html>