Schriftart Awesome 6: Vollständige Bewertung
- 1 So installieren Sie die Schriftart fantastisch
- Methode 1.
- Methode 2.
- 2 So verwenden Sie fantastische Symbole für Schriftarten
- 1 Standardikonen
- 2 große Symbole
- 3 Ikonen feste Ikonen
- 4 Symbole für Bulleted List
- 5 gerahmte Ikonen und Zitate
- 6 animierte Symbole
- 7 transformierte Ikonen
- 8 Kombinationssymbole
- 3 Font Awesome 4.5.0 collection, classes undcss code to insert using the content property
- 4 verwandte Ressourcen
- Symbolgröße
- Symbolfarbe
- Häufig Gestellte Fragen
Font Awesome ist eine Sammlung skalierbarer Vektor -Ikonen. Symbole können mit CSS -Eigenschaften formatiert werden, ihre Farbe, Größe, Schatten und vieles mehr festlegen. Schriftart Version 5.5.0 enthält 605 Symbole.
1 So installieren Sie die Schriftart fantastisch
Methode 1.
Verwenden Sie die Version der font-awesome.css der Datei, indem Sie den folgenden Code zu dem hinzufügen<head> Sektion:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Sobald die Schriftart verbunden ist, können Sie die Symbole auf Ihrer Website verwenden.
Methode 2.
Laden Sie die Schriftart von Font Awesome herunter. Packen Sie das Archiv aus und laden Sie zwei Ordner aus dem Archiv auf den Site -Server - CSS und Schriftarten hoch. Wenn Sie bereits Ordner mit solchen Namen auf Ihrer Website haben, müssen Sie nur Dateien aus den heruntergeladenen Ordnern hinzufügen.
Sie können die vollständige oder minimierte Version der Datei verwenden:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 So verwenden Sie fantastische Symbole für Schriftarten
Symbole können auf zwei Arten zu einer Webseite hinzugefügt werden: durch Einstellen der entsprechenden Klassen für die<i> und<span> elements, oderby adding them to the desired element using the :before, :after pseudo-elements undthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: vor {content: "\ f015";/ * Heim-Symbol hinzufügen1 Standardikonen
Font Awesome ist so konzipiert, dass sie mit Inline -Elementen verwendet werden soll. Um Symbole hinzuzufügen, müssen Sie zunächst die FA -Klasse auf die festlegen<i> oder<span> Element.
So fügen Sie das ausgewählte Symbol vor oder nach dem Element hinzu, ein leeres<i></i> oder<span></span> Das Element wird dem Element hinzugefügt, dem eine Icon -Klasse zugewiesen wird, sowie eine zusätzliche Klasse, die das Styling erweitert.
<i class="fa fa-camera-retro"></i>2 große Symbole
Verwenden Sie die Größe eines Symbols eines Symbols zu seinem Behälter, um die Klassen FA-LG (33% Zunahme), FA-2X, FA-3X, FA-4X, FA-5x) zu verwenden.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 Ikonen feste Ikonen
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation oderlists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Heim</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Bibliothek</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Anwendungen</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Einstellungen</a ></li></ul>4 Symbole für Bulleted List
Verwenden Sie die FA-UL- und FA-LI-Klassen, um die Standardkugeln in a zu ersetzen<ul>…</ul> Kugelliste.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Listenpunkt</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Listenpunkt</li> <li><i class="fa-li fa fa-square"></i>Listenpunkt</li></ul>5 gerahmte Ikonen und Zitate
Use the fa-border class to set the border for the icon. The pull-right undpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Donec Nec Purus Congue, Posuere Libero in, Porta Sapien. In SED Elit Lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 animierte Symbole
Fügen Sie die FA-Spin-, FA-Pulse-, Fa-Refresh- und FA-Cog-Klassen hinzu, um Spinn-Symbole einzurichten. Animation wird in IE8 - IE9 nicht unterstützt.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 transformierte Ikonen
Verwenden Sie zum Drehen oder Flip-Symbole die Klassen FA-Rotate-* und FA-FLIP-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 Kombinationssymbole
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, undfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes undcss code to insert using the content property
Symbole für Webanwendungen Fa -adjust - \ f042;Fa -Anchor - \ f13d;
Faarchive - \ f187;
Fa -arrrows - \ f047;
Fa -asterisk - \ f069;
FAAT - \ f1fa;
FA-Balance-Scale-\ f24e;
Fa -ban - \ f05e;
FA -Bank - \ f19c;
FA -Barcode - \ f02a;
Fa-battery-mepty-\ f244;
Fa-Battery-Half-\ f242;
FA-Battery-Quarter-\ f243;
FA-Battery-Drei-Quartier-\ f241;
Fa-battery-full-\ f240;
FA -Bett - \ f236;
FA -BEER - \ F0FC;
Fa -bell - \ f0f3;
FA-Bell-Slash-\ f1f6;
FA -Binoculars - \ f1e5;
FA-Birthday-Cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
Fa -book - \ f02d;
Verwenden Sie zum Drehen oder Flip-Symbole die Klassen FA-Rotate-* und FA-FLIP-*.
4 verwandte Ressourcen
Zusätzlich zur fantastischen Kollektion der Schriftart können Sie auch andere Symbolschriften verwenden.
Fontello.Fontello hat eine große Sammlung verschiedener Icon -Schriftarten. Sie können die Symbole auswählen, die Sie mögen, und sie auf Ihren Computer herunterladen.
Foundation Icon.Foundation Icon ist eine weitere Icon -Schriftaufnahme von den Entwicklern des Foundation Frameworks. Zusätzlich zu Standard -Symbolen bietet die Website Rund -Symbole, Social -Media -Symbole und vieles mehr.
Materialikonen.Materialikonen sind die einheitlichen Flachsymbole von Google, die die einfache Wahrnehmung verkörpern. Symbole sind für wunderschönes Display auf allen gemeinsamen Plattformen und für alle Bildschirmauflösungen optimiert.
Die Icon -Schriftkollektion enthält 750+ Symbole. Der einfachste Weg, eine Sammlung auf Ihrer Website zu Installierenieren, besteht darin, Symbole wie Google Web -Schriftarten zu verwenden. Zu diesem Zweck ist der folgende Code im Seite Seite enthalten:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Um die Schriftart in Browsern korrekt anzuzeigen, erhält das Element, das die Symbolschrift verwendet, die Material-ICON-Klasse:
.Material-ICons {Schriftfamilie: 'Materialikonen'; Schriftgewicht: Normales Schriftstil: Normale Schriftgröße: 24px; / * Bevorzugte Symbolgröße */ Anzeige: Inline-Block; Breite: 1em; Höhe: 1em; Linienhöhe: 1; Texttransformation: Keine; Buchstabe-Abteilung: Normale Wortschreibe: Normal; weißer Raum: Nowrap; Richtung: LTR; -Webkit-font-wach: Antialias; / * Unterstützt von allen Webkit-Browsern */ text-rendern: optimizelegibilität; / * Safari und Chromunterstützung */ -moz-osx-font-selbler: Graustufen; /* Firefox -Unterstützung. */ Schriften-Feature-Settings: 'Liga'; /* Dh Unterstützung. */}Die Symbole selbst werden mit dem hinzugefügt<I class=''material-Ikonen''>Ligatur- oder HTML -Code des Symbols</i> Tag, zum Beispiel:
<i class="material-Ikonen">Account_balance_wallet</i><i class="material-Ikonen"></i>Die Ligatur wird von allen modernen Browsern verstanden, dh ab Version 10. Der Symbolcode wird automatisch generiert. Dies müssen Sie mit der linken Maustaste auf das Symbolbild klicken und den vorgeschlagenen Look kopieren.
Symbolgröße
Symbolgröße is controlled by additional classes:
.material-Ikonen.md-18 {Schriftgröße: 18px;} /* für<i class="material-Ikonen md-18"></i> */.material-Ikonen.md-24 {Schriftgröße: 24px;} /* für<i class="material-Ikonen md-24"></i> */.material-Ikonen.md-36 {Schriftgröße: 36px;} /* für<i class="material-Ikonen md-36"></i> */.material-Ikonen.md-48 {Schriftgröße: 48px;} /* für<i class="material-Ikonen md-48"></i> */Symbolfarbe
Die Farbe der Symbole wird auch mit zusätzlichen Klassen festgelegt:
.Material-Ikonen.md-dark {Farbe: RGBA (0, 0, 0, 0,54);} /*<i class="material-Ikonen md-dark"></i> */.Material-Ikonen.md-light {Farbe: RGBA (255, 255, 255, 1);} /*<i class="material-Ikonen md-light"></i> */.Material-Ikonen.md-dark.md-inactive {Farbe: RGBA (0, 0, 0, 0,26);} /*<i class="material-Ikonen md-dark md-inactive"></i> * /.material-Ikonen.md-light.md-inactive {Farbe: RGBA (255, 255, 255, 0,3);} /*<i class="material-Ikonen md-light md-inactive">Gesicht</i> */Um eine benutzerdefinierte Farbe festzulegen, müssen Sie beispielsweise eine Klasse hinzufügen, die die Farbe des Symbols definiert:
.Material-Ikonen.indigo {Farbe: #1A237E;} /*<i class="material-Ikonen indigo"></i> */Häufig Gestellte Fragen
- Was ist eine Schriftart in einfachen Worten fantastisch?
- Im Wesentlichen handelt es sich um eine Schriftart mit Symbolen, die jedem Webseitenelement hinzugefügt werden können, um seine Sichtbarkeit und das Design zu verbessern. Die Sammlung besteht aus mehreren hundert Symbolen, die für jede Aufgabe und jeden Zweck geeignet sind.Weitere Informationen zu diesem Link
Michel Pinson ist ein Reisebegeisterter und Content Creator. Er verschmolz Leidenschaft für Bildung und Erkundung und erteilte sich darauf, Wissen zu teilen und andere durch faszinierende Bildungsinhalte zu inspirieren. Die Welt näher zusammenbringen, indem sie Einzelpersonen mit globalem Fachwissen und einem Gefühl des Fernwehs befähigen.
