Fuentes de iconos: ¿Cómo funcionan?

Entiendo que las fuentes de iconos son solo fuentes y que puedes obtener los iconos simplemente llamando a su nombre de clase, pero ¿cómo funcionan las fuentes de iconos?

Intenté verificar los recursos de fuentes de íconos relacionados cargados en Chrome para ver cómo las fuentes de íconos muestran los íconos (en comparación con las fuentes generales) pero no he podido averiguar cómo sucede esto.

Tampoco he tenido éxito en encontrar recursos sobre cómo se realiza esta "técnica de fuentes de iconos", a pesar de que hay muchas fuentes de iconos disponibles . También hay muchos recursos que muestran cómo se pueden integrar las fuentes de iconos , ¡pero nadie parece compartir o escribir sobre cómo se hace esto!

Los glifos son imágenes y no una fuente. Todos los íconos se encuentran dentro de una imagen de sprite (también disponible como imágenes individuales) y se agregan a los elementos como backround-images posicionados :

Iconos reales de fuente ( FontAwesome , por ejemplo) no incluye la carga de una fuente específica y hacer uso de la contentpropiedad, por ejemplo:

@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 la contentpropiedad no es compatible con los navegadores más antiguos, estos también utilizan imágenes .

Aquí hay un ejemplo de FontAwesome completamente sin procesar en uso como fuente, convirtiendo ( - ¡es posible que no pueda ver esto!) En una ambulancia: http://jsfiddle.net/GWqcF/2

Si su pregunta es cómo una clase CSS puede insertar un carácter específico (que se representará como un icono en la fuente especial), eche un vistazo a la fuente 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"; }

Por lo tanto, se usa una directiva de contenido CSS para insertar el carácter (que proviene de un área reservada especial de uso privado de Unicode que no estropea a otros lectores).

¿Cómo funcionan los iconos de fuentes web?

Los iconos de fuentes web funcionan mediante CSS para inyectar un glifo específico en el HTML utilizando la propiedad de contenido. Luego usa @font-facepara cargar una fuente web dingbat que estiliza el glifo inyectado. El resultado es que ese glifo inyectado se convierte en el icono deseado.

Para comenzar, necesitará un archivo de fuente web con los íconos que necesita, ya sea definidos para ASCIIcaracteres particulares (A, B, C, !, @, #, etc.)o en el Área de uso privado de la fuente Unicode, que son espacios en la fuente que no serán utilizados por caracteres específicos en una Fuente codificada en Unicode.

Lea más sobre cómo crear íconos de fuentes web en Responsive Webfont Icons .