Um guia para melhorar e mais nítido ícones da interface do usuário com fontes da Web

Se você estiver familiarizado com o uso de formatos de imagem de bitmap (como PNG e GIF) para exibir ícones em um site, também estará familiarizado com suas deficiências. Primeiro de tudo, dependendo da dimensão e quantas informações de cor o ícone tem, um tamanho de arquivo de ícone pode ser muito grande.

Se tivermos muitos ícones para colocar em um site, isso também diminuirá o desempenho do site, já que muitas solicitações HTTP precisam ser conduzidas pelo navegador. Embora esse problema possa ser resolvido com o sprite CSS, o tamanho do arquivo ainda é grande.

O ícone de bitmap também apresenta falhas na flexibilidade e escalabilidade; digamos que precisamos ampliar ou ampliar o ícone até certo nível, ou visualizá-lo através de uma resolução de tela muito alta, como na tela de retina; o ícone definitivamente Acabou parecendo embaçado.

Bem, se você levar em conta alguns dos problemas acima, provavelmente precisará usar fontes de ícones.

Usando ícones de fontes

A fonte do ícone é um conjunto de ícones compactados em uma fonte da Web que pode ser incorporada posteriormente em um site usando @Tipo de letra. Como ressaltou Chris em CSS-trick, há muitos benefícios de usar fonte sobre imagem para entregar ícones;

• Font é um objeto baseado em vetor que, por sua natureza, é independente de resolução, então o ícone permanecerá tão nítido em várias resoluções de tela, incluindo resoluções de tela muito altas (como nível de retina).
• Também é escalável, permitindo que seja ampliado em muitos níveis sem perder qualidade e precisão.
• Como o ícone é basicamente uma fonte, podemos também controlar a cor, transparência, text-shadow e até mesmo redimensioná-lo através da folha de estilo
• Nós também podemos animar o ícone com CSS3.
• O ícone é chamado com o @Tipo de letra regra que foi apoiada a partir do Internet Explorer 4 (com .eot).
• Pedido HTTP menor e tamanho de arquivo menor.

Aqui estão algumas das melhores fontes de ícones gratuitas que podemos encontrar:

• Fonte Incrível
• IcoMoon
• Ícones de mídia social
• Ícones da Fundação Zurb

Verifique se você verificou e seguiu a licença antes de incorporá-la ao seu site para honrar o tempo e o trabalho árduo do autor.

Regra @ font-face

Como mencionamos, os ícones são incorporados usando @Tipo de letra regra através da folha de estilo que definem novos família de fontes. No exemplo a seguir, usaremos os símbolos da Web;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fontes / websymbols-regular-webfont.eot'); src: url (formato 'fonts / websymbols-regular-webfont.eot? #iefix') (formato 'embedded-opentype'), url ('fontes / websymbols-regular-webfont.woff'), formato ('woff'), url ('fonts / websymbols-regular-webfont.ttf') formato ('truetype'), formato url ('fontes / websymbols-regular-webfont.svg # WebSymbolsRegular') ('svg');  

Então, no documento HTML, só precisamos adicionar os caracteres que representam o ícone e, em vez de aplicar o novo família de fontes amplamente no documento, podemos fazer mais especificamente adicionando uma classe extra a certos elementos em que o ícone precisa ser renderizado, assim;

 
 
h
 
Eu
 
j
 
UMA
 
Eu
 
 

De volta à folha de estilo, definimos o novo família de fontes para essa classe que acabamos de adicionar:

 .ícone-fonte font-family: WebSymbolsRegular; tamanho da fonte: 12pt;  

• Demo @ font-face

Usando pseudo-elementos

Se o ícone é tratado como o elemento lateral, também podemos entregar o ícone pseudo-elemento. Assumindo que a nossa marcação HTML é a seguinte:

 
 
Resposta
 
Responder todos
 
frente
 
Anexo
 
Imagem
 
 

Podemos fazer desta forma na folha de estilo:

 ul.icon-font.pseudo li: antes font-family: WebSymbolsRegular; margem direita: 5 px;  ul.icon-font.pseudo li: n-filho (1): antes de content: "h";  ul.icon-font.pseudo li: nth-child (2): antes de content: "i";  ul.icon-font.pseudo li: n-filho (3): antes de content: "j";  ul.icon-font.pseudo li: n-filho (4): antes de content: "A";  ul.icon-font.pseudo li: nth-child (5): antes de content: "I";  

• Pseudo-elemento de demonstração

Uso Privado Unicode

Há uma circunstância em que os ícones não foram incorporados em letras (A, B, C, D, etc.), mas foram incorporados no Uso Privado de Unicode para minimizar o conflito entre os caracteres. Como no FontAwesome, o autor felizmente adicionou todos os caracteres do código na folha de estilo, que se parece com isso;

 .icon-glass: antes de content: "\ f0c6";  

Mas quando precisamos embutir o ícone diretamente no HTML, algo como o seguinte código \ f0c6 não irá renderizar o ícone apontado, pois não é um caractere válido codificado em HTML.

HTML precisa de uma marcação de referência numérica para renderizar caracteres especiais. Nós falamos sobre isso um pouco no nosso tutorial anterior sobre CSS3 Buttons; esse caractere é prefixado com uma combinação de um sinal de e comercial (E), um sinal de hash (#) e um x seguido pelo número hexadecimal que representa o caractere.

Por exemplo, o f0c6 é um número hexadecimal, portanto, a referência de caracteres numéricos em HTML será & # xf0c6;, em FontAwesome esse código irá exibir o ícone de clipe de papel, igual a;

• Demo Unicode

Subconjunto de Fontes

Os ícones da coleção podem não ser todos necessários. Nesse caso, podemos descartar os caracteres não utilizados subconetando a fonte que também resultar em tamanhos de arquivo de fonte inferiores. Felizmente, existe uma ferramenta útil do FontSquirrel para fazer este trabalho facilmente, @ gerador de fontes.

Depois de ir para essa página e adicionar a fonte, selecione Especialista. Você verá mais algumas opções; selecionar Subconjuntos Personalizados.

Neste exemplo, usamos a fonte Sociolico para exibir ícones de mídia social em nosso site, mas os ícones que precisaremos são apenas Dribble, Facebook e Twitter, que são representados por esses caracteres; d, f e t. Então, coloque esses caracteres no campo de entrada de caracteres individuais da seguinte forma:

E nós terminamos Agora podemos baixar a fonte e, no meu caso, o tamanho da fonte acabou sendo de apenas 3Kb a 5Kb. Lembre-se também que os únicos personagens que será processado em um ícone são apenas d, f e t, enquanto os outros caracteres irão render para ser apenas uma letra normal.

Pensamento final

Uma coisa que não podemos fazer com esta prática é adicionar efeitos altamente detalhados como este para o ícone.

No entanto, se nosso design geral não exigir detalhes nesse nível, essa abordagem pode ser uma maneira melhor de exibir ícones em sites. Tem flexibilidade, escalabilidade, está pronto para retina com um tamanho de arquivo muito pequeno, o que mais podemos pedir??

Por fim, se você quiser aprofundar este tópico, abaixo nós reunimos algumas referências úteis, bem como nossa demonstração e código-fonte para download.

• Como fazer seu próprio ícone Webfont - WebDesignerDepot.com
• Exibindo Fontes e Atributos de Dados - 24Ways
• Uso Privado Unicode - Wikipedia

• Demonstração
• Fonte de download