Como exibir fontes de ícones nas páginas da web? Icon Font Display Style em html

O uso da fonte do ícone para gerar ícones tem os seguintes benefícios em comparação com os ícones baseados em imagem:

1. Tamanho de mudança livre

2. Modifique livremente a cor

3. Adicione o efeito de sombra

4.ie6 também pode apoiá -lo

5. Apoie outras propriedades dos ícones da imagem, como transparência e rotação, etc.

6. Você pode adicionar atributos como derramamento de texto e clipe de fundo: texto, desde que o navegador o suporta.

Modificação de texto:

<H3>

<span Aria-hidden = True Data-icon = &#x21dd;> </span>

Estatísticas

</h3>

[Data-icon]: Antes {

Fonte-família: ícones; / * BYO ICON FONT, mapeado de maneira inteligente */

Conteúdo: Att (Data-icon);

falar: nenhum; /* Para não ser confiável, mas ei. */

}

Ícone individual:

<a href =# class = icon-alone>

<span Aria-hidden = True Data-icon = &#x25A8;> </span>

<span class = screen-reader-text> rss </span>

</a>

/ * Mesmo CSS acima, mais */

.icon-alone {

Exibição: bloco embutido; / * Chrome 19 foi estranho com cliques sem isso */

}

.Screen-Reader-Text { / * Reutilizável, tipo de classe de classe * /

Posição: Absoluto;

Top: -9999px;

Esquerda: -9999px;

}

Se você precisar criar seu próprio iconfont, é recomendável usar o ICONMOON. Usando -o, você pode gerar a fonte do ícone necessária, carregando SVG ou fontes. Este artigo é uma demonstração on -line usando o iconmoon para gerar.

Visite a demonstração on -line para visualizar os resultados. Espero que gostem da fonte do ícone. Se você acha que o ícone não é suave o suficiente, considere usar o CUFON para processamento, para que o ícone gerado seja mais bonito.

Fonte: http://www.gbin1.com/technology/css/20120827-iCon-Font-USAGE/