Podstawowe ikony
Aby użyć czcionki Firma Awesome ikony, dodaj następującą linię wewnątrz <head> sekcji strony HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Uwaga: Nie ma potrzeby pobierania lub instalacji!
Umieścić czcionki Firma Awesome ikony za pomocą prefiksu fa i nazwę ikona jest.
Przykład
Poniższy kod:
<!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>Prowadzi do:
Czcionki niesamowite jest przeznaczony do stosowania z elementami wbudowanymi. <i> oraz <span> elementy są szeroko stosowane do ikon.
Należy również pamiętać, że jeśli zmienić rozmiar czcionki lub kolor pojemnika na ikonę, ikona zmienia. Te same rzeczy odnosi się do cienia, i wszystko, co dostaje dziedzicznej za pomocą CSS.
Większe ikony
fa-lg (33% increase) , fa-2x , fa-3x , fa-4x lub fa-5x klasy są stosowane w celu zwiększenia ikona rozmiary w stosunku do ich kontenera.
Przykład
Poniższy kod:
<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>
Prowadzi do:
Tip: Jeśli ikony są coraz odcięty od góry i od dołu, należy zwiększyć line-height.
Lista ikon
W fa-ul i fa-li klasy są stosowane w celu zastąpienia domyślnych kul w nieuporządkowanych list.
Przykład
Poniższy kod:
<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>Prowadzi do:
- List icons
- List icons
- List icons
Bordered i pociągnął Ikony
W fa-border , fa-pull-right lub fa-pull-left klasy są wykorzystywane do cytatów pociągowych lub wyrób ikon.
Przykład
Poniższy kod:
<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.Prowadzi do:
animowane ikony
fa-spin klasa dostaje dowolną ikonę, aby obrócić i fa-pulse klasa dostaje dowolną ikonę, aby obrócić z 8 etapów.
Przykład
Poniższy kod:
<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>
Prowadzi do:
Uwaga: IE8 i IE9 nie obsługuje animacji CSS3.
Obracane i przerzucony Ikony
W fa-rotate-* i fa-flip-* zajęcia służą do obracania i klapki ikony.
Przykład
Poniższy kod:
<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>Prowadzi do:
ułożone Ikony
Nałożenie wielu ikon, użyj fa-stack klasę na rodzica, fa-stack-1x klasy ikony regularnie wielkości i fa-stack-2x dla większej ikony.
fa-inverse klasy mogą być stosowane jako alternatywa ikona koloru. Można również dodać większych klas ikonę do rodzica do dalszej regulacji rozmiaru.
Przykład
Poniższy kod:
<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-cameraProwadzi do:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Poprawiono ikony Szerokość
fa-fw klasa służy do ustawiania ikon w stałej szerokości. Klasa ta jest przydatna, gdy różne szerokości ikona zrzucić wyrównanie. Szczególnie przydatny w navlists Bootstrap oraz grup list.
Przykład
<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> Spróbuj sam " bootstrap
Niesamowite czcionki również świetnie współpracuje z wszystkimi Bootstrap komponentów.