Font-Awesome-Icons

Descubre ¿Que son los Font Awesome Icons y Como Usarlos?

¿Que son los Font Awesome Icons?

Los Font Awesome Icons son un excelente juego de iconos para utilizar en nuestros sitios web que, además, ofrecen grandes posibilidades de personalización mediante diferentes reglas de estilo.

Font Awesome Icons es un proyecto para mediante el uso de la propiedad font-face de CSS3 y la etiqueta <i></i> de HTML5 tener acceso a nada menos que 361 iconos totalmente escalables y en constante actualización con nuevos iconos.

¿Comó usar Font Awesome Icons?

Su uso está preparado para funcionar y fusionarse fácilmente con el framework Bootstrap, pero podemos usar la fuente en otros proyectos desligados de este framework. Basta con seguir las sencillas instrucciones de su página web para usarla en nuestros proyectos.

Una vez configurada solo nos queda revisar la enorme lista de iconos y usar el que más nos guste con la etiqueta <i> de HTML5.

Lo mejor es que a efectos del sistema funciona como si de una fuente tipográfica se tratara por lo que podemos cambiar sus propiedades tales como tamaño, color, etc. fácilmente desde CSS.

Ejemplo de funcionamiento de Font Awesome Icons:

<i></i>

  • <i class=”fa es el comienzo de todo icono que queramos poner.
  • fa-camera-retro es el nombre del icono.
  • fa-1g es el tamaño de icono.
  • “></i> termina el código.

Los desarrolladores han cuidado hasta el más mínimo detalle y para que la fuente no interfiera con posible lectores de pantallas de invidentes usan los llamados caracteres de seguridad que son una parte de la fuente tipográfica que no se usa para los símbolos y letras comunes.

Características

Entre las principales características de Font Awesome Icons podríamos destacar las siguientes:

  • Todos los iconos son imágenes vectoriales por lo que pueden ser escalables a cualquier tamaño que se desee sin perder nada de calidad.
  • Los iconos se tratan como una fuente, no como imágenes. Cada icono es referenciado con un selector de una hoja de estilos.
  • Los iconos son totalmente personalizables: color, sombras, tamaño, animaciones, fondo, hacerlo girar Cualquier regla de una CSS puede ser aplicada a cualquier icono.
  • Diseñado para ser totalmente compatible con Bootstrap
  • Muchos iconos. En la actual versión 4.0.3 tenemos a disposición 369 iconos.
  • Se puede usar como listas, en menús, botones y donde quieras dado que es HTML.
  • Podemos crear CSS propio.
  • Es gratis dado que tiene licencia GPL con lo que puedes usarlos donde quieras.

Font Awesome Icons es un proyecto totalmente Open Source y compatible con licencia GPL por lo que puede ser utilizado para proyectos Open Source, proyectos comerciales o para cualquier tipo de proyecto.

Más en github