Fontes de ícones: como funcionam?


87

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!

Respostas:


53

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:

Glifos

Í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


4
Os ícones FontAwesome são fontes. Eu até mencionei FontAwesome em minha resposta e passei a dizer como eles lidam com navegadores que não suportam seu método CSS de adicionar ícones à página.
James Donnelly

3
Os ícones são os caracteres da fonte. Como um exemplo bruto: a letra "Z" poderia ser projetada para se parecer com uma mala, salva como uma fonte e, em seguida, usada em um site.
James Donnelly

1
Aqui está um exemplo de FontAwesome completamente bruto em uso, transformando - se em uma ambulância: jsfiddle.net/GWqcF/2
James Donnelly

6
@VivekChandra sim, isso mesmo! :-) As fontes de ícone são como qualquer outra fonte, exceto que os caracteres são estilizados para se parecer com ícones. FontAwesome usa uma gama de caracteres reservados para "uso privado" .
James Donnelly

1
Impressionante. Obrigado por todos os recursos - vamos dar uma olhada nisso, as coisas estão mais claras agora.
Vivek Chandra

23

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).


2
O que significa a barra f?
CodyBugstein

5
O fnão faz parte dele, é apenas o número hexadecimal 15. A barra invertida inicia a sequência de escape para um ponto de código hexadecimal. \f004em CSS é como em HTML.
Thilo

11

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 .

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.