Fuentes de iconos: ¿Cómo funcionan?

87

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!

css web fonts icons icon-fonts Vivek Chandra
fuente

Respuestas:

53

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 :

Glifos

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

James Donnelly
fuente
4
Los iconos de FontAwesome son fuentes. Incluso mencioné FontAwesome en mi respuesta y continué diciendo cómo manejan los navegadores que no admiten su método CSS para agregar los íconos a la página.
James Donnelly
3
Los iconos son los caracteres de la fuente. Como ejemplo burdo: la letra "Z" podría diseñarse para parecerse a una maleta, guardarse como fuente y luego usarse en un sitio web.
James Donnelly
1
Aquí hay un ejemplo de FontAwesome completamente crudo en uso, que se convierte en una ambulancia: jsfiddle.net/GWqcF/2
James Donnelly
6
@VivekChandra, ¡sí, es cierto! :-) Las fuentes de iconos son como cualquier otra fuente excepto que los caracteres están diseñados para que parezcan iconos. FontAwesome utiliza una variedad de caracteres reservados para "uso privado" .
James Donnelly
1
Increíble. Gracias por todos los recursos, lo investigaré, las cosas están más claras ahora.
Vivek Chandra
23

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).

Thilo
fuente
2
¿Qué significa la barra f?
CodyBugstein
5
El fno es parte de él, es solo el número hexadecimal 15. La barra invertida inicia la secuencia de escape para un punto de código hexadecimal. \f004en CSS es como en HTML.
Thilo
11

¿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 .

artamonovdev
fuente