Grund Icons
Um die Schrift Super - Symbole zu verwenden, fügen Sie die folgende Zeile in den <head> Abschnitt Ihrer HTML - Seite:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Hinweis: Kein Download oder Installation ist nicht erforderlich!
Sie platzieren Font Super - Symbole durch das Präfix fa und der Name des Symbols.
Beispiel
Mit dem folgenden Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>Ergebnisse in:
Super Font ist so konzipiert, mit Inline-Elemente verwendet werden. Die <i> und <span> Elemente werden für die Symbole verwendet.
Beachten Sie auch, dass, wenn Sie die Schriftgröße oder die Farbe des Containers Symbol zu ändern, ändert sich das Symbol. Gleiche Dinge geht für Schatten, und alles, was mit Hilfe von CSS geerbt wird.
Größere Icons
Die fa-lg (33% increase) , fa-2x , fa-3x , fa-4x oder fa-5x Klassen werden verwendet , um ihre Behälter das Symbol Größen relativ zu erhöhen.
Beispiel
Mit dem folgenden Code:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Ergebnisse in:
Tip: Wenn Sie Ihre Symbole oben und unten abgeschnitten werden immer, erhöhen Sie die Zeilenhöhe.
Liste Icons
Die fa-ul und fa-li - Klassen werden verwendet , um Standard - Bullets in ungeordnete Listen ersetzen.
Beispiel
Mit dem folgenden Code:
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List
icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li
fa fa-square"></i>List icons</li>
</ul>Ergebnisse in:
- List icons
- List icons
- List icons
Grenzt und Pulled Icons
Die fa-border , fa-pull-right oder fa-pull-left - Klassen sind für pull Zitate oder Artikel Symbole verwendet.
Beispiel
Mit dem folgenden Code:
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Ergebnisse in:
Animierte Icons
Die fa-spin - Klasse bekommt ein beliebiges Symbol zu drehen, und die fa-pulse - Klasse bekommt ein beliebiges Symbol mit 8 Schritten zu drehen.
Beispiel
Mit dem folgenden Code:
<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>
Ergebnisse in:
Hinweis: IE8 und IE9 nicht unterstützt CSS3 - Animationen.
Gedrehte und Flipped Icons
Die fa-rotate-* und fa-flip-* Klassen werden verwendet , Symbole zu drehen und kippen.
Beispiel
Mit dem folgenden Code:
<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>Ergebnisse in:
Gestapelte Icons
Um mehrere Symbole stapeln, verwenden Sie die fa-stack - Klasse auf dem Elternteil, der fa-stack-1x - Klasse für die regelmäßig große Symbol und fa-stack-2x für den größeren Symbol.
Die fa-inverse Klasse kann als Alternative Symbolfarbe verwendet werden. Sie können auch größere Symbol Klassen der Mutter hinzufügen, um die Schlichte zu steuern.
Beispiel
Mit dem folgenden Code:
<span class="fa-stack fa-lg">
<i class="fa fa-circle-thin
fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter
fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<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"
style="color:red;"></i>
</span>
fa-ban on fa-cameraErgebnisse in:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Feste Breite Icons
Die fa-fw - Klasse wird verwendet Symbole mit einer festen Breite einzustellen. Diese Klasse ist nützlich, wenn verschiedene Symbol Breiten Ausrichtung abwerfen. Besonders nützlich in Bootstrap der navlists und Listengruppen.
Beispiel
<div class="list-group">
<a href="#" class="list-group-item"><i
class="fa fa-home fa-fw"></i> Home</a>
<a href="#"
class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i>
Applications</a>
<a href="#" class="list-group-item"><i class="fa
fa-cog fa-fw"></i> Settings</a>
</div> Versuch es selber " Bootstrap
Font Super funktioniert auch gut mit allen Bootstrap-Komponenten.