¿Cómo mostrar fuentes de iconos en las páginas web? Estilo de pantalla de fuente de iconos en HTML

El uso de la fuente de iconos para generar iconos tiene los siguientes beneficios en comparación con los iconos basados ​​en imágenes:

1. Tamaño de cambio gratuito

2. Modifique libremente el color

3. Agregar efecto de sombra

4.Ie6 también puede apoyarlo

5. Admite otras propiedades de los iconos de imagen, como la transparencia y la rotación, etc.

6. Puede agregar atributos como el accidente cerebrovascular de texto y el clip de fondo: texto siempre que el navegador lo admita.

Modificación del texto:

<h3>

<span aria-hidden = true data-icon = &#x21dd;> </span>

Estadísticas

</h3>

[data-icon]: antes {

Font-Family: íconos; / * Fuente de icono byo, asignada de manera inteligente */

contenido: attr (data-icon);

hablar: ninguno; /* No se debe confiar, pero bueno. */

}

Icono individual:

<a href =# class = icon-Alone>

<span aria-hidden = true data-icon = &#x25a8;> </span>

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

</a>

/ * CSS mismo que el anterior, más */

.icon-eLOne {

Pantalla: bloque en línea; / * Chrome 19 fue raro con clickabilidad sin esto */

}

.screen-lector-text { / * reUSABLE, Toolbox tipo de clase * /

Posición: Absoluto;

Arriba: -99999px;

Izquierda: -99999px;

}

Si necesita crear su propio iconfont, se recomienda usar Iconmoon. Usándolo, puede generar la fuente de iconos que necesita cargando SVG o fuentes. Este artículo es una demostración en línea utilizando Iconmoon para generar.

Visite la demostración en línea para ver los resultados. Espero que te guste la fuente del icono. Si cree que el ícono no es lo suficientemente suave, puede considerar usar CUFON para el procesamiento, de modo que el icono generado sea más hermoso.

Fuente: http://www.gbin1.com/technology/css/20120827-icon-font-usage/