4 min de lectura

¿Qué son los íconos a través de fuentes?

Son una serie de fuentes tratados como íconos que ilustran una página web para darle una vista única.
Nos muestran mediante imágenes información que los lectores pueden leer fácilmente o en su defecto dar por hecho que es lo que se quiere transmitir.

Muchos de los botones que podemos ver en las páginas cuando estamos navegando, contienen delante del botón y la funcionalidad una imagen que no es más que un ícono y nos quiere decir algo. Además de ser acciones también suelen solo ser un extra a la vista

¿Dónde conseguir los íconos de fuentes?

Números sitios ofrecen paquetes para poder ser utilizados.
Algunos de ellos son:

• Fontawesome Tiene ventajas como una libreria bastante extendida gratuita para el uso de los desarrolladores. Para conocerlos puedes visitar su sitio web: https://fontawesome.com/
• Weather Icons Cuenta con varios iconos sobre el clima que nos ayudan a poner un sitio ilustrativo y que además de todo se pueden modificar desde el css y darles un formato adecuado a nuestras necesidades, en https://erikflowers.github.io/weather-icons/ puedes hacer una revisión de su contenido.
• Bootstrap Glyphicons  En este sitio se pueden obtener librerias ya listas con los iconos, puedes consultarlos en https://getbootstrap.com/.

¿Cómo usar los íconos desde fuentes?

Su uso no es complicado. El único defecto que tienen es que no es fácil elegir cual es el icono adecuado para alguna función ya que existen sin fin de sitios que proporcionan cualquier tipo de icono que ni siquiera pudieses imaginar.

Una vez que se selecciona un icono, es solo necesario referenciar en el HTML la ruta de donde se encuentra el icono que se va a colocar. Además de es importante seleccionar un tipo de fuentes para el proyecto ya que se hacen las peticiones a un solo lugar y de esta manera se pueden evitar conflictos entre

Cada una de las páginas anteriores muestran un listado o barra de búsqueda donde se pueden adquirir los iconos, las bibliotecas pueden ser descargadas o de igual manera se pueden referenciar en el HTML mediante el link de donde se encuentran.

Se ejemplifica con las fuentes proporcionadas por Fontawesome donde con la siguiente linea de código se tiene acceso a los iconos de esta biblioteca:

Así, si lo que se quiere es referenciar un icono de la palabra “code” es necesario lo siguiente:

Se utiliza la etiqueta i ya que es la indicada para mostrar la información que resulta ser especial.

La ventaja de utilizar este tipo de herramientas en lugar de imagenes es que son fáciles de cargar en el navegador debido a que pesan menos y aun cuando las imagenes no se puedan mostrar  en los navegadores estos seguiran estando visibles.

A pesar de que existen sin fin de iconos gratuitos, algunos son parte de paquetes que son necesario pagar. Tal es el caso de la tortuga.  <i class="fas fa-turtle"></i>

Por ejemplo: si en una página se quiere poner algun perro como el siguiente es necesario solo referenciarlo de la siguiente manera.

Y en el archivo css se podría cambiar el posicionamiento, tamaño, color, etc.

Y en  el browser podremos observar lo siguiente No obstante, cada uno de ellos tiene un diseño predefinido que puede llegar a ser modificado referenciando la clase en un archivo de estilos css.

Crea tus propios íconos a través de fuentes

Existen además aplicaciones que apoyan el diseño de nuevos iconos para que si por tu cabeza pasa algo que quieres insertar y no encuentras el icono perfecto entonces puedes crear uno propio como es el caso de http://fontastic.me/ , icomoon o Fontello.