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.
[code language=”html”]<!– Dentro do bloco head –>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">[/code]
[code language=”html”]<!– Tag i com classe para o ícone de RSS –>
<i class="fa fa-rss-square fa-5x"></i>[/code]
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.
[code language=”css”]/* CSS para o ícone de vídeo */
.video:before {
content: "\f03d";
font-family: FontAwesome;
}[/code]
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.
Oi, eu adorei esse recurso, coloquei no footer porém não ficou centralizado e sem espaço entre cada ícone. Já editei no CSS mas não sei acontece. :/
Grata! Funcionou muito bem!
Olá, Tatiane!
Parabéns pelo blog e pelo artigo. Tenho estudado o código do projeto FontAwesome e estou desenvolvendo um arquivo de fontes também. Seguindo a mesma ideia do Font Awesome o BF Font Icons é colaborativo e livre para quem quiser baixar e utilizar. http://bf-font-icons.braulioti.com.br
Olá, gostaria de saber como faço para colocar os icones em tamanho 2x 3x etc… no modo normal basta citar fa-2x e no css? Obrigado.
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.
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
Se você utiliza WordPress, talvez usar a função get_stylesheet_directory_uri() ao incluir o CSS do Font Awesome resolva o problema.
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
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.
Dica super útil. Me ajudou muito. Obrigado!!
Parabéns, horas pesquisando e você foi o único que e ensinou de forma simples e perfeitamente funcional
Parabéns Tatiane! Mas este site você não pode enviar seus próprios ícones certo? Se sim sabe como fazer? Agradeço muito.
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.
Neste link tem um tutorial: Creating and Implementing Your Own Icon Font.