Usando Font Awesome sem adicionar tags HTML

Alguns ícones do Font Awesome.
Alguns ícones do Font Awesome.

Das bibliotecas de ícones disponíveis na Internet, cada vez mais tenho usado o Font Awesome. Com mais de 470 ícones na versão 4.2 e customizável por CSS, é fácil de usar adicionando uma linha no bloco <head> e tags <i> com as classes dos ícones.

&lt;!-- Dentro do bloco head --&gt;
&lt;link href=&quot;//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;!-- Tag i com classe para o ícone de RSS --&gt;
&lt;i class=&quot;fa fa-rss-square fa-5x&quot;&gt;&lt;/i&gt;

Resultado:

E se não for possível adicionar elementos ao HTML?

Então, usando a pseudo-classe :before no CSS, adicionam-se os ícones aos elementos HTML já existentes.

/* CSS para o ícone de vídeo */
.video:before { 
  content: &quot;\f03d&quot;; 
  font-family: FontAwesome;
}

O código acima, por exemplo, adiciona o ícone antes do elemento com a classe video. Cor, tamanho da fonte e outras propriedades também podem ser customizadas no CSS.

E, de forma semelhante, pode-se usar a pseudo-classe :after para adicionar os ícones depois dos elementos.

Para localizar o código unicode que deve ser usado na propriedade content, pode-se verificar no arquivo font-awesome.css ou na página de cada ícone.

ícone fa-video-camera
ícone fa-video-camera

Lista completa de ícones Font Awesome.

Fonte: Using Font Awesome Icons without <i> Tags

14 respostas para “Usando Font Awesome sem adicionar tags HTML”

    1. Já fiz alterações nos ícones do Font Awesome definindo o tamanho em pixels, em ou rem diretamente no CSS do elemento no qual havia adicionado um ícone.

  1. Parabéns pelo artigo, legal!
    Tenho uma dúvida. Eu fiz e funcionou. Então baixei esse arquivo pelo wget (uso linux) e deixei o arquivo localmente num diretório css. Com esse arquivo local não funcionou.. por que isso?
    Obrigado

  2. Olá Tatiane. Tentei adicionar as fontes fazendo download dos arquivos no site oficial pra poder manipular o css mas dai não reconheceu. Adicionei no meu header o min.css e o .css. Qual outro arquivo preciso adicionar qdo tenho a biblioteca no servidor?
    Não uso WordPress ou qualquer outra plataforma pro site, é um sistema próprio. Obrigada

    1. Lais, possivelmente, a utilização dos dois arquivos, font-awesome.css e font-awesome.min.css deve ser a causa do problema. Inclua no <header> somente o .min.css.

    1. O Font Awesome, assim como outras fontes web, fornecem conjuntos predefinidos de ícones. Alguns sites, como icomoon.io e fontello.com, permitem alguma customização, incluindo o envio de SGVs customizados.

Deixe uma resposta para Gisele Caldas Cancelar resposta