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
Comentários