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.
Como usá -lo?Modificação de texto:
<H3><span Aria-hidden = True Data-icon = ⇝> </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>Crie sua própria fonte de ícone - ICOMOON<span Aria-hidden = True Data-icon = ▨> </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.
Etapa 1: selecione o que eles fornecem ou envie seu próprio Etapa 2: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/