Usando Font Awesome sem adicionar tags HTML

Autor: Tatiane Pires

disponívem em tatianepires.com.br

Republicado com adaptações.

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.

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.

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

Lista completa de ícones Font Awesome.

Comentários