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

Seleção brasileira iphone wallpapers

Em clima de despedida de copa, apresento o mais novo conjunto de wallpapers para o seu iphone. Vista a camisa e junte-se a nova seleção que ressurgirá.

Formulário de contato no blogger com o google docs

Como o blogger ainda não incluiu um formulário de contato nativo, temos que adaptar algumas maneiras para que isso seja feito. Há alguns tutoriais na web com widgets e serviços que funcionam de forma satisfatória, porém, neste tutorial, irei ensinar como usar o próprio google para realizar essa tarefa.Google docsO googledocs é uma suite de aplicativos assim como o Microsoft Office e o BrOffice (gratuito), com a vantagem de funcionar online direto do browser e de ser gratuito. 1º passoAcesse o site do Google docs e faça seu login. 2º passoClique em criar novo e selecione formulário. 3º passoNeste passo, iremos configurar nosso formulário. Entenda a estrutura e como irá funcionar: Nosso formulário terá 4 campos sendo eles: Nome, Email, Site e Mensagem. Os dois primeiros campos da imagem acima que eu não numerei são auto explicativos. Você define um título e se quiser um texto de informação sobre o formulário.1- Define o texto do campo. Deixe-o como nome. 2- Texto adicional, que po…

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.