Font Awesome-Symbol
Font Awesome ist eine beliebte Icon-Font-Bibliothek, die für Webdesign und -entwicklung verwendet wird.
Font Awesome enthält eine Reihe von Vektor-Symbolen, die einfach per CSS aufgerufen und verwendet werden können, und sie können in Größe, Farbe, Schatten und mehr angepasst werden.
Font Awesome war ursprünglich ein Open-Source-Projekt, das von Dave Gandy erstellt wurde, mit dem Ziel, ein flexibles, einfach zu verwendendes und skalierbares Icon-Set bereitzustellen, um traditionelle Bildsymbole zu ersetzen.
Font Awesome wurde über viele Versionen hinweg aktualisiert, und die derzeit gängige Version istFont Awesome 6 、Font Awesome 5undFont Awesome 4, alle Versionen können hier referenziert werden:https://fontawesome.com/versions。
Der Test dieser Website verwendeteFont Awesome 4, Icon-Liste:https://fontawesome.com/v4/icons/。
Um Font-Awesome-Symbole zu verwenden, fügen Sie im<head>-Bereich der HTML-Seite die folgende(n) Zeile(n) hinzu:
1. Empfohlenes CDN (Inland):
2. Empfohlenes CDN (Übersee)
3. Direkt lokal herunterladen
Herunterladen
Hinweis:Es wird nicht empfohlen, es herunterzuladen und zu installieren; verweisen Sie einfach im head des HTML-Dokuments auf die CDN-Datei.
Hinweis:Dieses Tutorial verwendet Version 4.7.0.
Sie können das Präfixfaverwenden, um Font-Awesome-Symbole gemäß den Symbolnamen zu platzieren.
Beispiel
Ergebnis:
Selbst ausprobieren »
Klicken Sie auf die Schaltfläche "Try it", um Online-Beispiele anzuzeigen
Font Awesome ist für die Verwendung mit Inline-Elementen konzipiert. Die Elemente `<i>` und `<span>` werden häufig für Symbole verwendet.
Beachten Sie außerdem, dass sich das Symbol entsprechend ändert, wenn Sie die Schriftgröße oder Farbe des Symbolcontainers ändern.
Große Symbole
Die Klassen fa-lg (erhöht um 33%), fa-2x, fa-3x, fa-4x oder fa-5x werden verwendet, um die Symbolgröße relativ zu ihrem Container zu erhöhen.
Beispiel
Ergebnis:
Selbst ausprobieren »
Tipp: Wenn Ihre Symbole oben und unten abgeschnitten werden, erhöhen Sie die Zeilenhöhe.
Listensymbol
Die Klassen `fa-ul` und `fa-li` werden verwendet, um das Standardpräfix in ungeordneten Listen zu ersetzen.
Beispiel
Ergebnis:
- Listensymbole
- Listensymbole
- Listensymbole
Selbst ausprobieren »
Umrandete und gezogene Symbole
Die Klassen fa-border, fa-pull-right oder fa-pull-left werden für Pull-Quotes oder Artikelsymbole verwendet.
Beispiel
Ergebnis:
Rookie Tutorial -- Lernen ist nicht nur Technologie, sondern auch Träume!!!
Rookie Tutorial -- Lernen ist nicht nur Technologie, sondern auch Träume!!!
Rookie Tutorial -- Lernen ist nicht nur Technologie, sondern auch Träume!!!
Selbst ausprobieren »
Dynamisches Icon
Die Klasse `fa-spin` lässt das Icon rotieren, und die Klasse `fa-pulse` lässt das Icon in 8-Schritt-Zyklen rotieren.
Beispiel
Ergebnis:
Selbst ausprobieren »
Hinweis:IE8 und IE9 unterstützen keine CSS3-Animationen.
Gedrehte und gespiegelte Icons
Die Klassen fa-rotate-* und fa-flip-* werden verwendet, um Icons zu drehen und zu spiegeln.
Beispiel
Ergebnis:
Selbst ausprobieren »
Gestapelte Icons
Um mehrere Icons zu stapeln, verwenden Sie die Klasse `fa-stack` am übergeordneten Element, die Klasse `fa-stack-1x` für Icons normaler Größe und `fa-stack-2x` für größere Icons.
Die Klasse `fa-inverse` kann als alternative Icon-Farbe verwendet werden. Sie können auch größere Icon-Klassen zum übergeordneten Element hinzufügen, um die Größe weiter zu steuern.
Beispiel
Ergebnis:
fa-twitter (invers) auf fa-circle
fa-ban auf fa-camera
Selbst ausprobieren »
Symbole mit fester Breite
Die Klasse `fa-fw` wird verwendet, um Icons mit fester Breite festzulegen. Diese Klasse ist sehr nützlich, wenn unterschiedliche Icon-Breiten zu Fehlausrichtungen führen. Sie eignet sich besonders für Bootstrap-Navigationslisten und Listengruppen.
Beispiel
Selbst ausprobieren »