Diversos

Font-Awesome: Fonte com Centenas de Ícones para seus Designs Web

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

O CSS tem um monte de coisas legais para brincar se você gosta de mexer no design do seu blog. Textos com sombra, degradê, rotacionado, e tantas outras opções, mas algumas esbarram em certos impedimentos. Digamos que você usa ícones em gif, png ou outro formato, e quer colocar o mesmo efeito de text-shadow do texto próximo no ícone… Como faz?

Para resolver coisas assim foram aparecendo com frequência nos últimos anos font icons, fontes que em vez de caracteres comuns, exibem ícones. Assim, usando a “letra” certa para mostrar o ícone que você precisa, fica fácil fazer estilizações comuns às tipografias. Além disso, elas podem ser redimensionadas com qualidade usando propriedades como o font-size.

Uma das melhores ferramentas para quem quiser experimentar é o Font Awesome. Atualmente com mais de 300 ícones, grátis para projetos pessoais ou comerciais, é compatível até com IE7, leitores de tela e pode ser redimensionado indefinidamente sem perda de qualidade.

Apesar de existirem alguns plugins para implementá-lo no WordPress, acho totalmente desnecessário – basta uma única linha no header.php do seu tema. Antes do fechamento </head>, cole:

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

Isso vai carregar os estilos do Font Awesome de um CDN. Depois é só começar a usar. Simples assim.

Veja uma amostra dos ícones, com a respectiva classe que os chama:

  • icon-expand-alt
  • icon-collapse-alt
  • icon-smile
  • icon-frown
  • icon-meh
  • icon-gamepad
  • icon-keyboard
  • icon-flag-alt
  • icon-flag-checkered
  • icon-terminal
  • icon-code
  • icon-mail-forward (alias)
  • icon-mail-reply (alias)
  • icon-reply-all
  • icon-mail-reply-all (alias)

Como funciona

Ao usar a classe correspondente ao ícone desejado num elemento, este vai “carregá-lo” usando o pseudo-elemento “before“, que cria um caractere via UTF-8 no lugar. O “before” (antes) é um seletor de CSS que cria um objeto antes daquele em que está marcado. Por exemplo: antes de todos os parágrafos:

p:before {
content:"\f083";
}

Assim, antes de todos os parágrafos é criado um caractere \f083, que no Font Awesome é o ícone “icon-camera-retro”. Você não tem que se preocupar com o código UTF-8 certo, a folha de estilos do FA já tem as marcações certas, é só saber a classe. Veja a lista completa de ícones e classes aqui.

Um exemplo básico de uso: criando uma lista com ícones:

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li>
  <li><a href="#"><i class="icon-fixed-width icon-book"></i> Biblioteca</a></li>
  <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Aplicativos</a></li>
  <li><a href="#"><i class="icon-fixed-width icon-cogs"></i> Configurações</a></li>
</ul>

Fica assim:

Depois você segue com estilizações adicionais, como efeitos hover, cor, etc. Veja uma lista mais que completa de uso em forms, divs, botões e muito mais no site do Font Awesome.

Suporte ao IE7

Pra começar, por favor nem pergunte sobre o IE6… Mas se precisa desesperadamente dar suporte ao IE7 (provavelmente não, e espero que não), acrescente também ao header.php:

<!--[if IE 7]>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

Download

Não é necessário, mas se precisar do arquivo no seu servidor por qualquer razão, baixe-o aqui.

Suporte, sugestões e afins…

Se não conseguiu usar (duvido muito que aconteça), o FA tem fórum (em inglês), e o desenvolvedor, Nicolas Gallagher, aceita sugestões de novos ícones e ideias em geral.

Suporte: no StackOverflow
Fórum no GitHub: sugestões e pedidos de ícones

Anúncios Google

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

2 Comments

  1. machienzle Reply

    amigo, pq quando eu faço isso tudo e nao aparece o icone, o que esta aparecendo no lugar do icone é o numero tipo.. icon-user ta aparecendo dentro de um quadradinho f001 e assim acontece com os demais…. pq isso?

    • DanielLemes Reply

      Em qual navegador, todos? Os ícones que mostrei aqui funcionam ou é só no seu site?
      Se puder passe o link pra gente ver.

Write A Comment

Pin