Iconos web - Introducción

Un icono es un símbolo que se utiliza para representar una acción o capacidad específica en una página web. Los iconos se utilizan tanto en documentos como en aplicaciones y pueden ser seleccionables o no seleccionables. Por ejemplo, las imágenes que vemos en los botones de una aplicación son todos iconos y estos botones son seleccionables. Del mismo modo, cuando utilizamos un icono como logotipo de la empresa, normalmente no se puede seleccionar.

En el entorno Windows, si silenciamos el volumen del sistema, se representará con la ayuda de un icono, como se muestra a continuación.

Usando íconos web, podemos representar una página de carga, una opción deshabilitada, un enlace, una redirección, etc. Estos íconos se pueden voltear, rotar, redimensionar, bordear, invertir y colorear.

Fuentes de iconos

Las fuentes de iconos contienen símbolos y glifos. Una vez que cargue una fuente deseada, puede usar cualquiera de los íconos provistos por esa fuente usando el nombre de clase del ícono. También podemos aplicar diferentes colores a los iconos y redimensionarlos usando las propiedades CSS. Hay varias bibliotecas de iconos (fuentes) que proporcionan iconos. Este tutorial se centra en tres fuentes principales, a saber:

  • Fuente impresionante
  • Glifos de Bootstrap
  • Iconos de material de Google

Fuente impresionante

Esta fuente proporciona 519 iconos vectoriales escalables gratuitos. Esta biblioteca es completamente gratuita, tanto para uso personal como comercial. Estos iconos se pueden personalizar fácilmente. Originalmente, fueron desarrollados para Bootstrap.

Glifos de Bootstrap

Esta es una biblioteca de iconos monocromáticos disponibles en formatos de imágenes rasterizadas, formatos de imágenes vectoriales y como fuentes. Proporciona más de 250 glifos en formato de fuente. Puede utilizar estas fuentes en sus proyectos web. Estos iconos no son gratuitos, sin embargo, puede usarlos en proyectos basados ​​en Bootstrap sin tener que comprarlos.

Iconos de material de Google

Google proporciona alrededor de 750 íconos diseñados bajo "pautas de diseño de material" y se conocen como Material Designiconos. Estos iconos son simples y son compatibles con todos los navegadores web modernos. Dado que estos iconos están basados ​​en vectores, también son escalables. Para utilizar estos iconos, tenemos que cargar la fuente (biblioteca)material-icons.