¿Qué es Icon Font y cómo funciona?

En este post, te hablaremos acerca de qué es Icon Font y algunos aspectos generales sobre su funcionamiento. En el diseño y desarrollo de aplicaciones existen elementos imprescindibles y es necesario incluirlos en el producto o servicio en el que estamos trabajando. Un aspecto importante es la iconografía y, por ello, es tan importante saber cómo se utilizan los iconos y cómo se implementan a nivel de código.

¿Qué es Icon Font?

Las fuentes de icono, en inglés Icon Font, hacen referencia a la forma en la que se incluyen los iconos en el desarrollo de una app o web, lo que quiere decir que se relaciona con los lenguajes de programación. En otras palabras, es la forma de decirle al ordenador cuál es el elemento que queremos agregar sin necesidad de escribir un carácter especial, sino que solo tenemos incluir o precisar lo que queremos hacer por medio de una clase. Es decir, debemos poner lo siguiente:

<span class=”un-icono”></span>

Si no solo te interesa saber qué es Icon Font, sino que deseas aventurarte a conocer más sobre los lenguajes de programación, te animamos a echarle un vistazo a nuestro post ¿Cuáles son los lenguajes de programación más demandados en 2024? En este artículo te contamos cuáles son los lenguajes con más demanda y te explicamos algunas características generales de los mismos.

¿Cómo funciona Icon Font?

Ya sabes qué es Icon Font, así que es el momento de hablar de cómo funciona. Existen diferentes páginas web en las que puedes encontrar fuentes de icono gratuitas, para que puedas incluirlas en tu trabajo sin problemas. Por ejemplo, en Google Fonts puedes encontrar iconos de acceso libre (free access) y te da la opción de descargarlos según cinco categorías:

• Outlined
• Filled
• Rounded
• Sharp
• Two tone

Estas categorías cumplen la función de modificar la forma de los iconos que Google pone a nuestra disposición. Además, al seleccionar el gráfico que nos interesa, te aparecerá un panel en la parte derecha de la pantalla y te mostrará opciones que competen al icono. De acuerdo con esto, en el caso de una web, tendrás la posibilidad de descargar el archivo y copiar la fuente de icono.

Otra página web que suele utilizarse mucho para conseguir iconos, así como su respectivo código fuente, es Font Awesome. Esta se considera una free font, una biblioteca de iconos vectoriales y la recomiendan diferentes desarrolladores web. Font Awesome, al igual que Google Fonts, ofrece Icon Font en cinco estilos, que son:

• Solid
• Regular
• Light
• Duotone
• THIN

Asimismo, esta web también nos da la opción de elegir si queremos descargar o subir los iconos. Además, cuenta con dos versiones, una de pago y otra gratuita.

• Con la versión gratuita puedes crear un kit Font Awesome, en el que puedes agregar los iconos que necesitas incluir en tu sitio web.
• En el caso de la versión de pago, puedes realizar las mismas acciones que con la versión gratuita y muchas más. Por ejemplo, obtienes acceso a una colección de iconos que crece y se actualiza constantemente y tienes más opciones en cuanto a los estilos. También puedes crear un espacio para colaborar con tu equipo de trabajo y agregar tus propios diseños.

Para incluir un icono en tu web usando esta página tienes dos opciones. La primera forma es crear un kit dentro de Font Awesome en el que incluyas los gráficos que necesitas, con el fin de agregar la clase CSS en el código; es decir una class fa, correspondiente al kit, que contenga el nombre y el estilo del icono. La otra alternativa es descargar el archivo en formato SVG para implementarlo de una forma más directa, puesto que de esta forma ya tendrías el archivo en tu dispositivo de trabajo.

¿Por dónde seguir?

Ahora que has aprendido qué es Icon Font y cómo funciona, y las posibilidades que brinda también su biblioteca free font, ¿te gustaría conocer más sobre el diseño y el desarrollo de aplicaciones móviles? Si quieres continuar con tu formación en este sector del mundo IT, te recomendamos investigar nuestro Desarrollo de Apps Móviles Full Stack Bootcamp. Gracias a nuestro bootcamp, en menos de un año aprenderás diversas pautas de diseño, así cómo a emplear los programas más usados y los lenguajes de programación imprescindibles para un desarrollador. Échale un vistazo al programa para descubrir todo lo que te ofrecemos para ayudarte a convertirte en un desarrollador de aplicaciones experto. ¡No lo pienses más e inscríbete!