¿Qué es una fuente de icono? (Y cómo usar uno)

Las fuentes de iconos son una solución popular a un problema CSS común; cómo incorporar iconos web en el diseño de su sitio web de una manera eficiente y de carga rápida.

Con una gran cantidad de servicios disponibles para facilitar la elección y el uso de una fuente de icono, no tiene que crear la suya desde cero. Las fuentes de íconos están en todo Internet.

Pero, ¿qué es exactamente una fuente de icono? ¿Y cómo los usas? Aquí hay una guía de todo lo que necesita saber sobre las fuentes de iconos.

Explore las fuentes

¿Qué es una fuente de icono?

Las fuentes de iconos son tipos de letra que utilizan imágenes pequeñas en lugar de letras. Al igual que el tipo, cada carácter es escalable y puede modificarse mediante CSS.

Las razones principales para usar una fuente de icono son que puede cambiar el tamaño, el color y la forma con facilidad. Las fuentes de iconos son transparentes por naturaleza, por lo que puede colocarlas en cualquier color o tipo de fondo y puede agregar trazos o cambiar la opacidad de los iconos.

Todo se hace con CSS para que no tenga que crear imágenes únicas para cada nueva instancia de un icono en el diseño. (Esto es ideal para mantener su sitio web y código ligero).

Las fuentes de iconos son imágenes vectoriales, lo que significa que son escalables. Al igual que con cualquier otra fuente, puede hacerlas tan grandes o pequeñas como desee. Use fuentes de íconos solo como elementos de arte o incluso dispersos en otros campos de texto.

La biblioteca más popular y conocida de fuentes de iconos es Font Awesome. Se utiliza para más de 100 millones de sitios web e incluye una sólida colección de opciones de iconos. Funciona con todas las herramientas populares, incluidas Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React y Ember.

También hay algunos otros conjuntos de iconos de fuentes bastante conocidos.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Pros y contras del uso de fuentes de iconos

Entonces, ¿por qué usarías, o evitarías, una fuente de icono? Estas son algunas de las ventajas y desventajas de trabajar con este estilo de elemento de arte.

Ventajas de usar fuentes de iconos

• Los iconos son fáciles de escalar siempre que existan las clases adecuadas en su CSS
• Puede obtener grandes bibliotecas de iconos con pocos problemas.
• Cambiar las propiedades de los iconos es fácil, no importa lo que haya usado para crear su sitio web
• Es fácil agregar íconos a cualquier página del sitio web (solo inserte el nombre del ícono)
• Hay miles de iconos para elegir en todo tipo de estilos.
• Los usuarios de WordPress pueden agregar fuentes de iconos con un complemento simple o copiando el directorio de fuentes en el código (casi cualquier interfaz)
• Puede crear su propia fuente de icono si necesita algo súper personalizado

Contras de usar fuentes de iconos

• Los iconos son de un solo color o degradado de color (en la mayoría de los casos); algunos paquetes premium más están cambiando esto
• No es una buena alternativa si la fuente del icono no se carga
• Es posible que no necesite un conjunto de iconos completo
• Algunos lectores de pantalla no saben qué hacer con las fuentes de íconos
• Es posible que no encuentre un paquete que se ajuste a sus necesidades

Cómo usar fuentes de iconos

Si bien las instrucciones para usar las fuentes de íconos pueden variar ligeramente según el proveedor que elija, la idea básica es la misma.

En general, tiene tres opciones (a menos que planee codificar un poco más usted mismo):

• Use un complemento que instale todo, de modo que solo tenga que llamar a los íconos que desea usar. (¡Muy facil!)
• Utilice los iconos de fuente incorporados de su CMS o creador de sitios web. Esto funciona muy bien si no tiene un sitio personalizado o necesita / desea un tipo específico de icono de fuente. La mayoría de los creadores de sitios web vienen con algo "listo para usar".
• Enlace manual a una fuente de icono alojada externamente. (La versión más complicada del uso de un complemento).

Fuentes de iconos vs. SVG

El debate más amplio es cambiar si debe (o desea) usar una fuente de icono frente a imágenes SVG con el fin de insertar imágenes pequeñas en su sitio web. Ambas opciones son igualmente viables y tienen mucho que ver con las preferencias personales.

Las fuentes de iconos son generalmente más fáciles de encontrar y usar para la mayoría de las personas. Los usuarios de SVG prefieren los iconos SVG que necesitan más control de diseño.

Un archivo SVG (formato vectorial escalable) puede darle un poco más de flexibilidad en el diseño. (No está limitado a un color). Los archivos pequeños y escalables se pueden cargar directamente en su directorio de medios y es fácil trabajar con ellos. Esta es una buena opción si solo necesita un puñado de iconos y no desea lidiar con una biblioteca.

Los SVG son más flexibles con la capacidad de agregar más colores y animación.

Las fuentes de iconos pueden cargarse más rápido a largo plazo porque están en caché. Pero la diferencia puede ser bastante mínima.

Posicionar las fuentes de los iconos puede ser un poco complicado ya que están sujetas a las reglas de fuente típicas, como el tamaño, el espaciado entre líneas y las alineaciones verticales. Esta es la razón por la cual la mayoría de las personas que usan una fuente de ícono optan por un proveedor establecido en lugar de intentar crear la suya propia.

Los SVG pueden incluir elementos que los hacen más accesibles que las fuentes de iconos, que pueden aparecer como caracteres de letras para los lectores de pantalla.

Las fuentes de iconos son generalmente más fáciles de encontrar y usar para la mayoría de las personas. Las bibliotecas están generalmente disponibles y no son difíciles de entender. Los usuarios prefieren los iconos SVG que desean más opciones de control de diseño y personalización.

Ambas opciones se usan comúnmente y funcionan bien en la mayoría de los casos. Elegir uno tiene mucho que ver con lo que le resulte más cómodo y con la estética de su diseño y su interfaz de usuario.

Conclusión

Una de las razones por las que las fuentes de iconos son tan populares es que son versátiles y fáciles de usar. Gracias a un formato escalable que se puede instalar con un par de clics en la mayoría de los sistemas de administración de contenido, casi cualquier persona puede comenzar a usar fuentes de iconos rápidamente.

El beneficio real de una fuente de icono es que el elemento usa CSS y no es un archivo de imagen independiente. Esto es bueno para crear un sitio web esbelto con elementos que se cargan rápidamente y en formato vectorial (excelente si necesita cambiar el tamaño más adelante).