Icoane de bază
Pentru a utiliza Font pictogramele Awesome, adăugați următoarea linie în interiorul <head> din pagina HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Notă: Nu este necesară descărcarea sau instalarea!
Plasezi Font icoane Awesome folosind prefixul fa și numele icoanei.
Exemplu
Următorul cod:
<!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>Rezultate în:
Font Awesome este proiectat pentru a fi utilizat cu elemente inline. <i> și <span> elemente sunt utilizate pe scară largă pentru pictograme.
De asemenea, rețineți că, dacă schimbați font-size sau culoarea containerului pictogramei, pictograma devine. Aceleași lucruri merge în umbră, și orice altceva care devine moștenit folosind CSS.
Icoane mari
fa-lg (33% increase) de fa-2x fa-3x fa-4x fa-5x (33% increase) , fa-2x , fa-3x , fa-4x , sau fa-5x clase sunt folosite pentru a crește pictograma dimensiuni în raport cu containerul lor.
Exemplu
Următorul cod:
<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>
Rezultate în:
Tip: Dacă pictogramele sunt obtinerea retezate în partea de sus și de jos, crește linia de înălțime.
Listă Icoane
În fa-ul si fa-li clasele sunt utilizate pentru a înlocui gloanțe implicite în listele neordonate.
Exemplu
Următorul cod:
<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>Rezultate în:
- List icons
- List icons
- List icons
Marginita și apăsă Icoane
În fa-border , fa-pull-right sau fa-pull-left clase sunt folosite pentru a trage pentru citate sau pictograme articol.
Exemplu
Următorul cod:
<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.Rezultate în:
Icoane animate
fa-spin clasa devine orice pictogramă pentru a roti, iar fa-pulse clasa devine orice pictogramă pentru a roti cu 8 trepte.
Exemplu
Următorul cod:
<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>
Rezultate în:
Notă: IE8 și IE9 nu acceptă animații CSS3.
Rotated și oglindită Icoane
De fa-rotate-* si fa-flip-* clase sunt folosite pentru a roti și flip pictograme.
Exemplu
Următorul cod:
<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>Rezultate în:
Icoane suprapuși
Pentru a stivuiți mai multe pictograme, utilizați fa-stack clasa pe mamă a fa-stack-1x clasă pentru pictograma de dimensiuni în mod regulat, și fa-stack-2x pentru pictograma mai mare.
fa-inverse clasa poate fi folosit ca o alternativă de culoare pictogramă. Puteți adăuga, de asemenea, cursuri icon mai mari la mamă pentru a controla în continuare dimensionarea.
Exemplu
Următorul cod:
<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-cameraRezultate în:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Icoane fixe Lățime
fa-fw clasa este utilizată pentru a seta pictograme la o lățime fixă. Această clasă este utilă atunci când diferite lățimi icon arunca aliniere. Mai ales util în navlists Bootstrap și grupuri de listă.
Exemplu
<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> Încearcă - l singur » bootstrap
Font Awesome, de asemenea, funcționează foarte bine cu toate componentele Bootstrap.