Fontes de ícones: como funcionam?

Eu entendo que as fontes de ícone são apenas fontes e que você pode obter os ícones apenas chamando seu nome de classe, mas como as fontes de ícone funcionam?

Tentei verificar os recursos de fontes de ícones relacionados carregados no Chrome para ver como as fontes de ícones exibem os ícones (em comparação com as fontes gerais), mas não consegui descobrir como isso acontece.

Também não tive sucesso em encontrar recursos sobre como essa "técnica de fonte de ícone" é feita, embora existam muitas fontes de ícone disponíveis . Também existem muitos recursos que mostram como as fontes de ícone podem ser integradas , mas ninguém parece estar compartilhando ou escrevendo sobre como isso é feito!

Os glifos são imagens e não uma fonte. Todos os ícones são encontrados em uma imagem de sprite (também disponível como imagens individuais) e são adicionados aos elementos conforme posicionados backround-image:

Ícones de fontes reais ( FontAwesome , por exemplo) que envolvem o download de uma fonte específica e fazer uso da contentpropriedade, por exemplo:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Como a contentpropriedade não é compatível com navegadores mais antigos, eles também usam imagens .

Aqui está um exemplo de FontAwesome completamente bruto em uso como fonte, transformando ( - você pode não ser capaz de ver isso!) Em uma ambulância: http://jsfiddle.net/GWqcF/2

Se sua pergunta é como uma classe CSS pode inserir um caractere específico (que será renderizado como um ícone na fonte especial), dê uma olhada na fonte de FontAwesome :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Portanto, uma diretiva de conteúdo CSS é usada para inserir o caractere (que é de uma área reservada especial de uso privado do Unicode que não confunde outros leitores).

Como funcionam os ícones da webfont?

Ícones de fontes da Web funcionam usando CSS para injetar um glifo específico no HTML usando a propriedade content. Ele então usa @font-facepara carregar uma webfont dingbat que estiliza o glifo injetado. O resultado é que esse glifo injetado se torna o ícone desejado.

Para começar, você precisará de um arquivo de fonte da web com os ícones de que precisa, seja definido para ASCIIcaracteres específicos (A, B, C, !, @, #, etc.)ou na área de uso privado da fonte Unicode, que são espaços na fonte que não serão usados ​​por caracteres específicos em um Fonte codificada em Unicode.

Leia mais, como criar um ícone de webfont em Ícones de Webfont responsivo .