<
Menu

Tableless


propriedade-content-css

Geração de conteúdo estático via CSS

iStock_000015515973Small

Propriedade background-clip

flexbox

Flexbox – Organizando seu layout

raio-x

Um raio-x do seu website


Imagem post: Font icons – Utilizando ícones em formato de font

Font icons – Utilizando ícones em formato de font

Aprenda a usar font para fazer elementos com ícones.

Você já deve ter desenvolvido um sistema onde o designer utilizou muitos ícones em botões, links e etc… A primeira coisa que pensamos em fazer são sprites com todos estes ícones. O problema é que dependendo da sua necessidade, criar Sprites para todos os ícones pode se tornar algo realmente trabalhoso. Ainda mais quando estes ícones são utilizados em várias cores e tamanhos. Utilizar ícones em imagens separadas dá tanto trabalho quanto.

Mesmo assim, até hoje utilizávamos esses métodos sem alguma outra solução interessante que nos desse a possibilidade de utilizar ícones em qualquer tipo de elemento, com facilidade de mudança de cores e principalmente de tamanho. Foi aí que depois do advento do css font-face, alguém teve a grande ideia de fazer uma família de font em formato de ícones.

Soluções atuais

Normalmente o pessoal utiliza o ícone como background do elemento. Essa é a solução mais comum e até agora a mais fácil. Muito melhor e mais correto inserir uma imagem de ícone no background do elemento do que colocar a imagem diretamente no código HTML.

Mas pense em larga escala. Pense em ter vários ícones sendo colocados em vários elementos. A coisa complica bastante por que você precisa ter uma maneira de controlar todos eles.

Alguns desenvolvedores faziam uma solução simples com jQuery. O HTML era o mesmo que o exemplo abaixo, algo como:

<a href="#" class="ico ico-search">Buscar</a>

Via jQuery o desenvolvedor pega todos os elementos que tem a classe ico e adiciona um span ou qualquer outro elemento no começo do objeto em questão para adicionar o ícone.

Outra solução mais inteligente que a de cima é inserir os ícones via background. O HTML continua igual ao do exemplo acima, mas sem a necessidade de inserir um SPAN via Javascript. Todos os elementos que terão ícone recebem a classe ICO, que carrega os estilos comuns como background-repeat, background-position, width, height e etc… Em conjunto com essa classe comum, eles carrega uma outra classe que irá especificar o ícone. No caso do exempo acima, a classe ICO-SEARCH irá colocar uma imagem de ícone de lupa.

Essas soluções são interessantes, mas não são o ideal.

Solução moderna

Com a saída do IE6/7 nós podemos utilizar algumas facilidades dos seletores do CSS. Tendo o HTML abaixo, como exemplo:

<a href="#" class="ico-search">Buscar</a>

O CSS ficaria assim:

[class^="ico-"]:before {
  content: " ";
  width:10px; height:10px;
  display:inline-block;
  vertical-align:middle;
}

Isso cria um pseudo-elemento ANTES (:before) de qualquer objeto que tenha no atributo class um valor que inicia com ico-
Pronto, o elemento criado dinamicamente com JQuery agora é feito pelo CSS com o atributo content.

O atributo content serve para inserirmos um pedaço de conteúdo nos elementos dinamicamente via CSS. Essa propriedade trabalha em conjunto com os pseudo-elementos :before e :after. Entenda mais sobre a propriedade content e os pseudo-elementos :before e :after aqui.

Perceba que o valor do atributo content está vazio. Ali dentro iremos colocar o caractere que representa o ícone que queremos utilizar.

Hoje existem muitas coleções de font-icons que você pode utilizar de graça. Existem dois sites sensacionais onde você pode personalizar suas fonts: Fontello e IcoMoon. Eu já usei os dois, mas gostei mais do IcoMoon.

Quando você faz um pacote no Fontello ou no IcoMoon eles já te dão o código prontinho, basta importar no seu projeto. O código que eles utilizam é algo assim:

/** ICONS **/
@font-face {
  font-family: 'NomeDaFonte';
  src: url('NomeDaFonte.eot');
  src: url('NomeDaFonte?#iefix') format('embedded-opentype'),
    url('NomeDaFonte.svg#Locaweb-Icons') format('svg'),
    url('NomeDaFonte.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="ico-"]:before {
  content: " ";
  width:10px; height:10px;
  display:inline-block;
  vertical-align:middle;
  font-family: icomoon;
}

.icon-home:before { content: '\2302'; } /* '⌂' */
.icon-export:before { content: '\e715'; } /* '' */
.icon-folder-open:before { content: '📂'; } /* '\1f4c2' */
.icon-search:before { content: '🔍'; } /* '\1f50d' */
.icon-link:before { content: '🔗'; } /* '\1f517' */

O primeiro bloco de código importa a fonte que será usada. O segundo bloco nós já explicamos anteriormente, ele define um elemento vazio no início do objeto que receberá a fonte. E terceiro bloco define quais os ícones em suas respectivas classes. Coisa linda.

A vantagem de usar fonts para essa tarefa é que como os ícones são fonts, temos total liberdade de aumentar ou diminuir as fonts, mudar de cor e etc… Não precisamos nos preocupar em gerenciar diversos stripes de imagens, de todos os tamanhos e cores, sem contar que usando fonts, os ícones já são pré-preparados para aparelhos com alta densidade de pixels.

Veja um exemplo direto do IcoMoon aqui no nosso GitHub.
O CSS-Tricks também fez um exemplo com um monte de firulas.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://about.me/diegoeis/

Mais posts do autor

Comentários (25)

  • http://twitter.com/drfranca Daniel França

    Muito bom, mas ficou uma dúvida, porque colocar background no link não é o ideal?

  • jnejunior

    muito bom o artigo Diego, estou criando um site e com certeza vou usar alguns destes icones…
    valeu.

  • Fernando

    MUITO massa isso!
    Já existe alguma solução para enviar um desenho de ícon e a ferramenta gerar o ícone como fonte!?

  • http://twitter.com/tableless Tableless

    O IcoMoon importa SVG. Acho que isso ajuda.

  • http://twitter.com/VanderAmorin Vander Amorin

    Sensacional!!

  • http://twitter.com/okatsuralau Gabriel Okatsura Lau

    Outra coleção de FontIcons interessante é o FontAwesome (http://fortawesome.github.com/Font-Awesome/). Ele se integra facilmente com o TwitterBootstrap e tem bastante ícones também. Mas esse IconMoon é tem umas ferramentas bem legais de personalização.

  • Dorian

    Como sempre, diego eis ajudando em meus projetos :P Belo tópico ! Parabéns !!!

  • Marcelo Diniz

    IE6 eu ja consigo convencer tds clientes, mas infelizmente tem uns ou outros q resistem ainda ao ie7, dai o q fazer, pois imagino que não va funcionar não é, usar sprite mesmo?

  • http://twitter.com/tassoevan Tasso Evangelista

     Só polyfills salvam, eu acho.

  • Elias Faiçal

    Interessante

  • Fernando

    melhor impossível!

  • wBruno

    Eu fiz um fallback para identificar ie6 e adicionar o span, pois o maior problema da técnica é o “content”.

  • Estenio

    “inserirmos um pedaço de conteúdo nos elementos dinamicamente” Qual a diferença então de eu fazer isso:DIV{ background:red; }
    .opção1{ text-align:left; }
    .opção2{ text-align:center; } 
    .opção3{ text-align:right; } 

    nesse caso acontece a mesma coisa que no código acima na qual é herdado de ico, sei que no caso acima ele herda sem atrapalhar os demais objetos que estão no mesmo nível ou em níveis separados mas será mesmo que é necessário fazer isto?

  • Shankar Cabus

    Bootstrap + FontAwesome = Esse post

  • http://twitter.com/emersoncoder emerson@code4life

    cliente que usa IE6 IE7, precisa ser doutrinado. Falta de argumento por parte do desenvolvedor o cliente utilizar ainda navegadores obsoletos, inseguros e instaveis.

  • http://twitter.com/AndrePTGET André Brandão

    Muito bom! Curto muito o Fontello.

  • http://twitter.com/J_Mello1 João Mello

    Não conhecia o IconMoon, agora ficou muito mais fácil escolher quais icones quero, antes os fazia no corel e transformava-os em fontes.
    É por isso que o Tableless está sempre em 1º no meu favoritos. :D

  • Lucas

    Os ícones em
    http://tableless.github.com/exemplos/font-icons/ não exibem no Chrome 21.0.1180.89

  • zullcore

    Com COMPASS é um alívio, pois com a tecnologia de sprite, fica bem menos trabalhoso.

  • http://www.facebook.com/glaucia.rezende.5 Glaucia Rezende

    Gostei, valeu!

  • Douglas

    o :before não funciona em input type=” submit” que merda

  • Jivago Silva

    Alguma necessidades especial para usar esse recurso com o wordpress, pois tenho um layout e no wordpress o recurso não funciona.

  • Faga OO Almeida OO

    Muito boa a materia

  • Raíne Santana

    Surpreendente! Quando a gente acha que não dá mais pra simplificar ou otimizar, surge algo inovador, complexo e maravilhoso. Ótimo post.

  • Diego Silva

    Olá! Estou enfrentando dificuldades para utilizar icon fonts com a codificação iso-8859-1. Aparentemente eles só funcionam com utf-8, porém o utf-8 não acentua. Bem, confesso que é a primeira vez que estou utilizando esse recurso e que sou amador… Se alguém souber uma solução que me permita utilizar os icons e acentuação simultaneamente, fico grato. ;)