Pular para o conteúdo principal

Font awesome – fonte em formato de ícones

Quantas vezes nos deparamos com aquelas famosas fontes chamadas Dingbats, que ao invés de letras trazem consigo desenhos, símbolos e outras figuras. Pois bem, Font Awesome é justamente igual, e foi desenvolvida reunindo um conjunto com os ícones mais utilizados pela web afora. Tudo é feito via css e seu uso é bastante simples.

Algumas vantagens da font awesome

  • 369 ícones em uma única fonte
  • Não necessita de Java script
  • Permite o controle dos ícones via css (cores, tamanhos e etc.…)

Utilização

Cole a seguinte linha dentro do elemento head de seu site ou blog.


<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Acesse a página de ícones e escolha o que irá utilizar. Aqui irei utilizar o ícone do facebook.

obs.: O fa-facebook é o identificador do ícone e deverá ser utilizado quando aplicarmos em nosso trabalho.

Aplicando o ícone

Agora que definimos o ícone que iremos utilizar e já temos sua identificação, basta aplicarmos como mostro abaixo.

Antes

<p>Facebook</p>

Depois

<p><i class="fa fa-facebook"></i> Facebook</p>
Repare que aplicamos o elemento “I” vazio, junto da classe obrigatória “Fa” + o identiciador do ícone que no caso é o “fa-facebook”.

Resultado

Facebook

Fotmatando o ícones via css

O controle via css segue o mesmo pradão de qualquer elemento.

.fa-facebook {
color: #3b5998;
}

Facebook

Com essa técnica é possível reduzir drasticamente a utilização de imagens. Se curtiu, deixe-me saber nos comentários.

Comentários

Postagens mais visitadas deste blog

10 super mockups grátis

Um mockup é basicamente uma maquete, uma cópia do trabalho final muitas vezes em tamanho resumido para dar a ideia do real projeto. Muitos dos mockups disponibilizados na web já possuem toda estrutura necessária e permite uma economia de tempo na hora de criar obras derivadas.

Criando um rodapé com 3 colunas

O rodapé de um site não pode ser esquecido, deixado de lado contendo apenas uma data e uma assinatura copyright. Com o passar do tempo ele ganhou força, estilo, e pode ser tão relevante quanto a barra laretal.Neste tutorial, você irá criar um rodapé de três colunas com poucos códigos.

Adicione um botão voltar ao topo no rodapé do seu blog

Um recurso muito utilizado por designers hoje em dia, em páginas que possuem muito conteúdo, são os botões “voltar ao topo”. Seu funcionamento permite que o leitor não tenha que ir até a barra de rolagem para voltar ao inicio do blog, bastando que ele simplesmente clique no botão.Para criar este recurso, basta que você utilize uma âncora (link) para o topo do seu blog.