2

Estava dando uma olhada em uma classe de um template de Wordpress e vi que ele criava uma imagem de um logo do facebook usando o content do CSS com uma sequência de caracteres.

O trecho que gera a imagem é o seguinte:

.cmsms-icon-facebook-circled-1:before { content: '\ee2e'; }

Não achei nada no Google que me explicasse como isso é feito, pois pelo F12 não consigo achar a imagem.

O link do template é:

http://eco-nature.cmsmasters.net/onepage

São os ícones de redes sociais do rodapé.

Fiquei curioso pra saber do que se trata, pois vi que pelo content é possível incluir uma imagem utilizando o "content: url()"

2
  • Editei, pois os snippets são obviamente para reproduzir os problemas com CSS/html/js e não para mostrar códigos, para apenas mostrar código use o Ctrl+K ou clique no icone {}
    – Syzoth
    Commented 21/04/2015 às 20:21
  • Obrigado Guilherme, é que as vezes uso o stackoverflow em inglês e tem coisas diferentes. Obrigado.
    – Marco
    Commented 22/04/2015 às 16:31

2 Respostas 2

3

Icon Fonts

O nome disso se chama Icon Fonts, é uma técnica utilizada para mostrar "ícones" de forma mais leve. Como você deve saber, podemos redimensionar uma fonte até onde quisermos que a mesma não irá perder a qualidade, porém isso não acontece com imagens. Isso fazia os desenvolvedores terem diversas imagens de tamanhos diferentes para os ícones, e muitas vezes isso era peso extra para a página. A solução? Criar ícones utilizando fontes!

Ao invés de você ter uma imagem (em formato .png, por exemplo), você tem um arquivo comum de fontes com os caracteres como ícones. A partir dai, você pode exibir seus ícones de maneira livre, sem se preocupar com o tamanho nem a qualidade.

Diversos sites disponibilizam ícones de maneira fácil, assim você não precisa se preocupar em criá-los. Exemplos desses sites são:

O que o content faz, é "chamar" o caractere que representa o ícone você quer. No caso de seu exemplo, \ee2e é o caractere que representa o ícone do Facebook.

2
  • Excelente resposta meu caro. Acabei descobrindo logo depois que criei a pergunta, que são carregados arquivos de fonte e um arquivo svg. Se caso eu fosse criar meus icons fonts precisaria de tudo isso ou só o svg resolveria?
    – Marco
    Commented 22/04/2015 às 16:43
  • Depende. Se forem vários ícones é melhor você criar um arquivo de fonte iguais os sites que eu indiquei fazem. Caso forem só alguns, você pode criá-los em SVG. Não tenho certeza se dá para fazer "CSS Sprites" com SVG, caso consiga, será o melhor. Commented 22/04/2015 às 18:44
1

O que ele está utilizando na verdade é uma biblioteca de fontes. Veja por exemplo estas outras bibliotecas:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .