Aprende en casa Ir a KODOTI
Aprende en casa KODOTI

Íconos en formato de fuente

Veremos como usar fontawesome para enriquecer nuestra website con íconos.

Rodríguez Patiño, Eduardo
Rodríguez Patiño, Eduardo
2020-07-03 | 2,716 lecturas

Font Awesome por decirlo así es una fuente de íconos con una amplia gama.

La ventaja de usar este, es que reducimos considerablemente el peso ya que no usamos imagenes sino una fuente, podemos aplicar reglas de estilos a los iconos ya que vuelvo a repetir son fuentes como agrandar su tamaño mediante font-size sin miedo que quede pixeleada y no tenemos que buscar más iconos para nuestros proyectos, porque estoy seguro que con la gama que trae nos basta y sobra, de paso le damos un mismo estilo a todo nuestro proyecto mejorando el look & feel.

Y lo mejor de todo que podemos alterar su tamaño sin problema alguna, nunca se van a pixelear ya que son vectores.

¿Cómo usarlo?

  • Descargamos el set de fuentes desde http://fortawesome.github.io/Font-Awesome/, descomprimimos el archivo y renombramos la carpeta, yo le puse de nombre assets.
  • Dentro de la carpeta, veremos otra carpeta llamda css, es la que nos interesa, ahí tenemos el archivo font-awesome.min.css
  • Debemos agregar font-awesome.min.css a nuestro proyecto web, lo podemos hacer de la siguiente manera dentro de nuestras etiquetas head, yo prefiero hacerle un import dentro de mi hoja de estilo principal.
  • Luego de haber hecho esto, necesitamos obtener el ícono que más nos guste desde http://fortawesome.github.io/Font-Awesome/icons/,guardenlo en sus favoritos.

Para nuestro ejemplo usaremos el primer ícono, la de los dedos cruzados, muy bien la forma de usarlo es simple denle click y nos llevara a una página que contiene la etiqueta con una clase, cada clase hace referencia al icono que esta compuesto por "fa fa-nombre-del-icono", y de esta manera en nuestro navegador se visualiza.

<i class="fa fa-angellist"></i>

Estudia con nosotros

🚀 Mejora tus oportunidades laborales