Font Awesome tutorial

Ícones Font Awesome

Font Awesome é uma excelente biblioteca de fontes de ícones e framework CSS.

A fonte de caracteres Font Awesome fornece ícones vetoriais escaláveis, que podem ser personalizados em tamanho, cor, sombra e qualquer estilo que possa ser aplicado com CSS.

Para usar ícones Font Awesome, adicione a seguinte linha na seção do seu página HTML:

1、recomendado CDN no interior:

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

2、recomendado CDN no exterior

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Anotação: Não é recomendado baixar para instalar, você pode simplesmente incluir o arquivo CDN no cabeçalho do documento html.
Anotação: Este tutorial usa 4.7.0 versão.

Você pode usar o prefixo fa e o nome do ícone para inserir ícones Font Awesome.

Exemplos online

Exemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.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>

Teste e veja ‹/›

Font Awesome é projetado para ser usado com elementos inline. Os elementos <i> e <span> são amplamente usados para ícones.

Além disso, note que se alterar o tamanho da fonte ou a cor do contêiner do ícone, o ícone será alterado.

ícone grande

fa-lg (aumentar33％)，fa-2x,fa-3x, fa-4x, ou fa-5O tipo x é usado para aumentar o tamanho do ícone em relação ao seu contêiner.

Exemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

Teste e veja ‹/›

Dica: Se o seu ícone for cortado no topo e na parte inferior, aumente a altura da linha.

ícones de lista

fa-ul e fa-li classe é usada para substituir o prefixo padrão da lista não ordenada.

Exemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<ul class="fa-ul">
　　<li><i class="fa-li fa fa-check-square"></i>Ícones de lista</li>
　　<li><i class="fa-li fa fa-spinner fa-spin"></i>Ícones de lista</li>
　　<li><i class="fa-li fa fa-square"></i>Ícones de lista</li>
</ul>
　
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

bordas e ícones arrastados

fa-border, fa-pull-right ou fa-pull-left classe é usada para referências arrastadas ou ícones de artigos.

Exemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
Tutoriais básicos　--　Aprender os fundamentos, você pode ir mais longe !!<br>
Tutoriais básicos　--　Aprender os fundamentos, você pode ir mais longe !!<br>
Tutoriais básicos　--　Aprender os fundamentos, você pode ir mais longe !!<br>
Tutoriais básicos　--　Aprender os fundamentos, você pode ir mais longe !!
　
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

ícones dinâmicos

fa-A classe 'spin' pode fazer o ícone girar, fa-A classe 'pulse' pode fazer o ícone girar 8 passo para girar em ciclo.

Exemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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-engrenagem fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
　
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Atenção: IE8 e IE9 não suportado por CSS3 animação.

ícones girados e invertidos

fa-rotate-* e fa-flip-* Classe usada para girar e inverter ícones.

Exemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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>
　
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

ícones empilhados

Para empilhar vários ícones, use fa no pai.-stack classe, fa-stack-1x classe é usada para ícones de tamanho normal, fa-stack-2x para ícones maiores.

fa-A classe 'inverse' pode ser usada para substituir a cor do ícone. Você também pode adicionar classes de ícone maiores ao pai para controlar o tamanho ainda mais.

Exemplo

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<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-camera
　
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Ícone de largura fixa

fa-A classe 'fw' é usada para definir ícones de largura fixa. Quando a largura dos ícones diferentes desvia do alinhamento, este tipo é muito útil. Especialmente adequado para listas de navegação e grupos de listas do Bootstrap.

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="largura=device-largura, inicial-scale=1">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
　
<p>Com largura fixa:</p>
<div class="lista-grupo">
　　<a href="#" class="lista-grupo-item><i class="fa fa-casa fa-fw>/i>　Casa</a>
　　<a href="#" class="lista-grupo-item><i class="fa fa-livro fa-fw>/i>　Biblioteca</a>
　　<a href="#" class="lista-grupo-item><i class="fa fa-lapis fa-fw>/i>　Aplicações</a>
　　<a href="#" class="lista-grupo-item><i class="fa fa-engrenagem fa-fw>/i>　Configurações</a>
</div>
<p>Sem largura fixa:</p>
<div class="lista-grupo">
　　<a href="#" class="lista-grupo-item><i class="fa fa-casa></i>　Casa</a>
　　<a href="#" class="lista-grupo-item><i class="fa fa-livro></i>　Biblioteca</a>
　　<a href="#" class="lista-grupo-item><i class="fa fa-lapis></i>　Aplicações</a>
　　<a href="#" class="lista-grupo-item><i class="fa fa-engrenagem></i>　Configurações</a>
</div>
　
</body>
</html>

Teste e veja ‹/›

O efeito após a execução é o seguinte:

Ícones de marca Font Awesome