Ícones básicos
Para usar os ícones impressionantes da fonte, adicione a seguinte linha dentro do <head> da sua página HTML:
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
Nota: Não precisa fazer download ou instalação é necessária!
Você colocar ícones impressionantes fonte usando o prefixo fa eo nome do ícone.
Exemplo
O código a seguir:
<!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>Resulta em:
Font impressionante é projetado para ser usado com elementos em linha. A <i> e <span> elementos são amplamente utilizados para ícones.
Observe também que se você mudar o tamanho da fonte ou a cor do recipiente do ícone, o ícone muda. Mesmas coisas vai para sombra, e qualquer outra coisa que fica herdada usando CSS.
Ícones maiores
A fa-lg (33% increase) , fa-2x , fa-3x , fa-4x , ou fa-5x classes são usadas para aumentar o ícone tamanhos relativos ao seu recipiente.
Exemplo
O código a seguir:
<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>
Resulta em:
Tip: Se seus ícones estão sendo cortadas na parte superior e inferior, aumentar o line-height.
Lista Icons
As fa-ul e fa-li classes são usadas para substituir balas padrão em listas não ordenadas.
Exemplo
O código a seguir:
<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>Resulta em:
- List icons
- List icons
- List icons
Ícones fronteira e puxou
As fa-border , fa-pull-right ou fa-pull-left classes são usadas para para cotações de puxar ou ícones do artigo.
Exemplo
O código a seguir:
<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.Resulta em:
Ícones animados
O fa-spin classe recebe qualquer ícone para rodar, eo fa-pulse classe recebe qualquer ícone para rodar com 8 etapas.
Exemplo
O código a seguir:
<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>
Resulta em:
Nota: IE8 e IE9 não suportam animações CSS3.
Girado e ícones Flipped
As fa-rotate-* e fa-flip-* aulas são usadas para girar e inverter ícones.
Exemplo
O código a seguir:
<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>Resulta em:
Ícones empilhados
Para empilhar vários ícones, use a fa-stack aula sobre o pai, a fa-stack-1x classe para o ícone regularmente médias, e fa-stack-2x para o ícone maior.
A fa-inverse classe pode ser usada como um ícone de cor alternativa. Você também pode adicionar o ícone classes maiores para o pai para controlar ainda mais o dimensionamento.
Exemplo
O código a seguir:
<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-cameraResulta em:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Ícones largura fixa
A fa-fw classe é usada para definir ícones com uma largura fixa. Esta classe é útil quando ícone diferentes larguras de jogar fora de alinhamento. Especialmente útil em navlists do Bootstrap e grupos da lista.
Exemplo
<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> Tente você mesmo " Bootstrap
Font impressionante também funciona muito bem com todos os componentes de inicialização.