Las fuentes de iconos son increíblemente útiles cuando se diseña un sitio, y tienen una gran cantidad de ventajas sobre los íconos regulares.
Debido a que se entregan como un archivo de fuente e incrustado como una fuente, estos íconos son fácilmente escalables, su color puede ser alterado en vivo, en lugar de tener que editar imágenes; junto con eso, se pueden agregar varios efectos a través de la codificación, como sombras, efectos de trazo o degradados, haciéndolos mucho más versátiles que las imágenes.
Aquí, vamos a reunir algunas de las mejores fuentes de íconos que la world wide web tiene para ofrecer, para que pueda usar en sus sitios.
Fico es una fuente de aspecto fantástico, presentada en un hermoso sitio, que hace que sea una alegría de descargar y usar. El sitio muestra claramente qué letra o glifo se usa para cada icono, lo que elimina el proceso a veces doloroso de descargar una fuente de icono solo para descubrir que no tienes idea de dónde encontrar cada ícono en tu teclado y gastar un tiempo precioso en desplazarte por cada tecla. Estos iconos se ven fantásticos en conjunción con Helvetica, las líneas suaves y limpias que trabajan juntas temáticamente crean la sensación de que Fico fue creado para tipos de letra sans serif. Otros ejemplos se pueden ver en su sitio.
Pixelado es una fuente que, a pesar de todo su encanto, tiene un uso práctico. ¡Pixelated es extremadamente liviano, el tamaño de los archivos de iconos es de alrededor de 60 bytes! ¡No megabytes, o incluso kilobytes, bytes! También puede descargarlos como GIF transparentes, por lo que son compatibles hasta IE6, y si desea editarlos, puede descargar un PSD. La fuente viene con dos esquemas de color, que se muestran a continuación, lo que hace que usarlos sea aún más simple. ¡Es completamente gratis y está disponible para uso comercial!
Sorprendentemente para una fuente con más de 100 iconos, Entypo viene completamente gratis, y al igual que Pixelated, está disponible para uso comercial. Se puede descargar como un archivo vectorial para editar junto con el archivo de fuentes OpenType. Esta fuente recuerda mucho a los íconos de la interfaz de Apple, utilizados en iOS5 y OSX10, y como un toque agradable, el 50% de las donaciones hechas en el sitio de la fuente son donadas a Wikipedia.
Además del nombre bastante ingenioso, Uicons Ofrezca 391 íconos en su conjunto e incluya íconos específicos de la red social que a menudo se pierden en las fuentes de íconos. No es sorprendente que este conjunto no sea gratuito, sin embargo, por un precio relativamente económico de $ 20, todas las actualizaciones posteriores de la fuente son gratuitas. Estos iconos están diseñados para ser infinitamente escalables, haciendo que el diseño receptivo, desde pantallas de escritorio de 1080p hasta dispositivos móviles como el iPhone, sea mucho más fácil. Se puede descargar en múltiples formatos, pero no como una fuente actualmente, se incluye en esta lista porque el soporte está pendiente y merece un lugar aquí.
Icónico es un conjunto de iconos de código abierto que consta de 171 iconos en varios formatos, incluso como fuente. Está diseñado para ser escalable, y su objetivo es ser el ícono más visionario basado en su compatibilidad con los métodos de visualización / despliegue orientados hacia adelante. Los iconos no solo deben ser claros y atractivos, deben ser fáciles y flexibles para trabajar con ellos ". La naturaleza de código abierto de esta fuente significa que se ha agregado por necesidad cuando se necesitaban iconos, en lugar de planificarse como un conjunto desde el principio, lo que hace que se incluyan algunos iconos bastante interesantes y menos convencionales en el conjunto.
Esta es una adaptación de otra fuente, Bitcons , un conjunto de 120 iconos en 10 colores diferentes y varios tamaños. Sanscons tiene como objetivo hacer que Bitcons sea más amigable con CSS, con fondos transparentes y 13 colores. Los iconos también vienen en 16 × 16, 32 × 32 y 64 × 64 píxeles, así como recortados a medida. Los iconos de 32 × 32 y 64 × 64 tienen un aspecto más grueso, manteniendo el estilo de píxeles. El conjunto es gratuito bajo la licencia Creative Commons.
Heydings es una fuente creada a partir del "déficit frustrante de alta calidad, fuentes web gratuitas de iconos disponibles para incrustación", en palabras de los creadores. Contiene 60 glifos, y el sitio web incluso ofrece CSS para facilitar la codificación con la fuente. El autor también ha mapeado los iconos alfabéticamente para una mayor facilidad de uso. Estos están diseñados para ser utilizados como parte de la interfaz de usuario central de su sitio, por lo que los glifos cubren un amplio rango para una variedad de sitios diferentes.
Este conjunto de iconos va acompañado de un extenso sitio web que cubre todos los aspectos de Solo vector , desde cómo se procesa en el navegador hasta cómo se vería en un sitio formateado, en varios tamaños, junto con el código para hacer que @ fontface sea más fácil. Incluso incluye una práctica guía de solución de problemas que se aplica a todas las webfonts, que cubre la carga en varios navegadores, incluidos los móviles. El sitio web muestra la escalabilidad de la fuente, mostrando tamaños mucho más grandes de lo que muchas fuentes de iconos se molestan en admitir.
Flexi está disponible en myfonts.com, que ofrece una página que muestra la representación de la fuente en múltiples navegadores. La fuente tiene 68 glifos y cuesta $ 29, y además de una fuente web, ofrece opciones de OpenType OTF y TrueType para mayor versatilidad.
Escritos sociales solo tiene los 18 iconos que se muestran a continuación, sin embargo, los $ 10 están justificados en las variaciones en las que pueden aparecer, con opciones como iconos cuadrados o circulares. Viene con un formato de tipo abierto, además de tener licencia para usar con @ font-face. En la compra, se le proporciona un archivo HTML con múltiples ejemplos de uso de la fuente @ font-face. Además de esto, puede optar por pagar $ 15 por la fuente, en lugar del estándar de $ 10, donde $ 10 de los $ 15 se destina a Charity: Water.
ikoo es una fuente especialmente desarrollada para integrarse en una página html sin usar imágenes a través de @FontFace u otros medios. Se centra en la navegación del sitio y ofrece una serie de iconos realmente limpios en variantes blancas y negras, con 65 iconos gratuitos en total.
Esto le da dos juegos por el precio de uno, solo $ 29 por 190 caracteres, InfoBits tiene dos fuentes de iconos separadas, que se muestran a continuación, que también están disponibles individualmente por $ 19 cada una. Los personajes tienen un estilo lúdico pero tradicional, con una gran variedad de usos y opciones, siendo enormemente versátiles tanto para la navegación del sitio como para otros usos periféricos.
Pictos es un conjunto de iconos disponible en una increíble cantidad de formatos, y el sitio tiene un enlazador de llaves incorporado para personalizar tu propia fuente de Pictos. Contiene 650 iconos, y se considera lo suficientemente bueno como para ser utilizado en toda la web, por sitios como Microsoft, Adobe y BitTorrent. Debido a la funcionalidad de fuente personalizada, se usa directamente en los servidores de Pictos, por lo que requiere una suscripción escalable después de una prueba gratuita de 10 días. Es una fuente increíblemente atractiva, y es fácil ver por qué es utilizada por tantos sitios web de buena reputación.
Esta fuente está diseñado para ser utilizado con el marco de Bootstrap CSS de Twitter, que incluye 220 íconos, dando ejemplos de íconos que se usan en la interfaz de Bootstrap en su sitio. También se les da como iconos vectoriales para facilitar la edición, y la nueva versión 2.0 es compatible con IE7, para una compatibilidad máxima.
¿Cuál es el ícono más útil, un carrito, un ícono de Twitter? ¿Perdimos uno de tus juegos favoritos? Háganos saber en los comentarios.