Una guía para iconos de UI mejores y más agudos con fuentes web

Si está familiarizado con el uso de formatos de imagen de mapa de bits (como PNG y GIF) para mostrar iconos en un sitio web, entonces también estará familiarizado con sus defectos. En primer lugar, dependiendo de la dimensión y la cantidad de información de color que tenga el icono, el tamaño del archivo de un icono podría ser muy grande.

Si tenemos demasiados íconos para colocar en un sitio web, también puede ralentizar el rendimiento del sitio web ya que el navegador debe realizar muchas solicitudes HTTP. Aunque este problema se puede resolver con sprite CSS, el tamaño del archivo todavía es grande.

El icono de mapa de bits también tiene limitaciones en cuanto a flexibilidad y escalabilidad; digamos que necesitamos ampliar o ampliar el icono a un cierto nivel, o verlo a través de una resolución de pantalla muy alta, como en la pantalla de la retina; el icono definitivamente resulta borroso.

Bueno, si tiene en cuenta algunos de los aspectos anteriores, probablemente necesite utilizar las fuentes de iconos.

Usando Fuentes de Iconos

Un fuente de icono es un conjunto de iconos empaquetados en una fuente web que luego se puede incrustar en un sitio web usando @Perfil delantero. Como lo señaló Chris en CSS-trick, hay muchos beneficios de usar la fuente sobre la imagen para entregar íconos;

La fuente es un objeto basado en vectores que, por su naturaleza, es independiente de la resolución, por lo que el ícono permanecerá tan nítido en varias resoluciones de pantalla, incluidas resoluciones de pantalla muy altas (como el nivel de retina).
También es escalable, lo que permite ampliarlo en muchos niveles sin perder calidad y precisión..
Dado que el icono es básicamente una fuente, También podemos controlar el color, la transparencia, la sombra del texto e incluso cambiar su tamaño a través de la hoja de estilo
También podemos animar el icono con CSS3..
El icono se llama con el @Perfil delantero regla que ha sido compatible desde Internet Explorer 4 (con .eot).
Menor solicitud de HTTP y menor tamaño de archivo.

Estas son algunas de las mejores fuentes de iconos gratuitas que podemos encontrar:

Fuente impresionante
IcoMoon
Iconos de redes sociales
Iconos de la Fundación Zurb

Asegúrese de haber comprobado y seguido la licencia antes de insertarla en su sitio web para respetar el tiempo y el trabajo duro del autor.

Regla de @ font-face

Como hemos mencionado, los iconos están incrustados usando @Perfil delantero gobernar a través de la hoja de estilo que definen nuevos Familia tipográfica. En el siguiente ejemplo utilizaremos los Símbolos Web;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: url ('fonts / websymbols-regular-webfont.eot? #iefix') formato ('embedded-opentype'), url ('fonts / websymbols-regular-webfont.woff') formato ('woff'), url ('fonts / websymbols-regular-webfont.ttf') formato ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') formato ('svg');

Luego, en el documento HTML, solo necesitamos agregar los caracteres que representan el ícono, y en lugar de aplicar el nuevo Familia tipográfica ampliamente en el documento, podemos hacer más específicamente agregando una clase adicional a ciertos elementos en los que se debe representar el ícono, como tal;

  h
 yo
 j
 UNA
 yo

De vuelta a la hoja de estilo, definimos el nuevo. Familia tipográfica para esa clase que acabamos de agregar:

 .icon-font font-family: WebSymbolsRegular; tamaño de letra: 12 puntos;

Demo @ font-face

Usando pseudo-elementos

Si el icono se trata como elemento lateral, también podemos entregar el icono a través de pseudo-elemento. Suponiendo que nuestro marcado HTML es el siguiente:

  Respuesta
 Responder a todos
 Adelante
 Adjunto archivo
 Imagen

Podemos hacerlo de esta manera en la hoja de estilo:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margen derecho: 5px;  ul.icon-font.pseudo li: nth-child (1): antes de contenido: "h";  ul.icon-font.pseudo li: nth-child (2): antes de contenido: "i";  ul.icon-font.pseudo li: nth-child (3): antes de contenido: "j";  ul.icon-font.pseudo li: nth-child (4): antes de contenido: "A";  ul.icon-font.pseudo li: nth-child (5): antes de contenido: "I";

Pseudo-elemento demo

Unicode de uso privado

Existe una circunstancia en la que los iconos no se incrustaron en las letras (A, B, C, D, etc.), pero se incrustaron en el uso privado de Unicode para minimizar el conflicto entre los caracteres. Al igual que en FontAwesome, el autor afortunadamente ha agregado todos los códigos de caracteres en la hoja de estilo, que tiene este aspecto;

 .icono-vidrio: antes de contenido: "\ f0c6";

Pero cuando necesitamos incrustar el ícono directamente en el HTML, algo como el siguiente código \ f0c6 no representará el icono señalado, ya que no es un carácter válido codificado en HTML.

HTML necesita un marcado de referencia numérica para representar caracteres especiales. Lo hemos cubierto un poco en nuestro tutorial anterior sobre los botones de CSS3; este carácter está prefijado con una combinación de un signo "y" comercial (Y), un signo de hash (#) y un X luego seguido por el número hexadecimal que representa el carácter.

Por ejemplo, el f0c6 es un número hexadecimal, por lo que la referencia del carácter numérico en HTML será & # xf0c6;, en FontAwesome ese código mostrará el icono de clip, al igual que;

Demo Unicode

Subconjunto de fuentes

Es posible que no se necesiten todos los iconos de la colección. En ese caso, podemos descartar los caracteres no utilizados al subordinar la fuente que también resultado en tamaños de archivo de fuente más bajos. Afortunadamente, hay una herramienta útil de FontSquirrel para hacer este trabajo fácilmente, @ font-face generator.

Después de ir a esa página y agregar la fuente, seleccione Experto. Verás algunas opciones más; seleccionar Subconjunto personalizado.

En este ejemplo, utilizamos la fuente Sociolico para mostrar los íconos de las redes sociales en nuestro sitio web, pero los íconos que necesitaremos son solo Dribble, Facebook y Twitter, que están representados respectivamente por estos caracteres; d, f y t. Por lo tanto, coloque esos caracteres en el campo de entrada Caracteres individuales de la siguiente manera:

Y hemos terminado. Ahora podemos descargar la fuente y, en mi caso, el tamaño de la fuente ha resultado ser de solo 3Kb a 5Kb. También recuerda que los únicos personajes que se representarán en un icono solo d, f y t, mientras que los otros personajes se renderizarán para ser solo una letra regular.

Pensamiento final

Una cosa que no podemos hacer sobre esta práctica es agregar efectos altamente detallados como este al ícono.

Sin embargo, si nuestro diseño general no requiere detalles a ese nivel, este enfoque podría ser una mejor manera de mostrar los iconos en los sitios web. Tiene flexibilidad, escalabilidad, está lista para retina con un tamaño de archivo muy pequeño, ¿qué más podemos pedir??

Por último, si desea profundizar más en este tema, a continuación, hemos reunido algunas referencias útiles, así como nuestra demostración y el código fuente para descargar..

Cómo hacer su propio icono Webfont - WebDesignerDepot.com
Visualización de fuentes y atributos de datos - 24vías
Unicode de uso privado - Wikipedia

Manifestación
Descargar fuente