El blog de | Pixel in love

Cómo usar iconos de Font Awesome en tu web Divi, de la manera más fácil

12/07/2021 | Divi, Iconos, Imágenes

Para ilustrar listas, o para poner un simbolito , o un emoji … o los logos de las redes sociales . Una imagen vale más que mil palabras, y si es un iconito sencillo mejor que mejor.

Esto tiene algo de complicación, pero te guiaré paso a paso, y una vez lo desmenucemos y lo entiendas, verás que no es para tanto.

Existen muchos repositorios de iconos, pero nos vamos a centrar sólo en uno: Font Awesome. Esta web tiene más de 1600 iconos gratuitos que puedes usar (y de pago tiene muchos más).

Para empezar a usar Font Awesome en nuestro sitio web con Divi solo tendremos que pegar una línea de código en las opciones de Divi. Una vez hecho podremos utilizar el buscador de iconos de Font Awesome para copiar y pegar el código correspondiente a cada icono.

Vamos a ver cómo se hace paso a paso

Obteniendo el código de Font Awesome

  1. Entra en cdnjs.com y busca font-awesome en el buscador.
  2. Dale al símbolo </> (copy link tag) para que se te copie la línea de código.
  3. Entra en el panel de administración de WordPress de tu web, y ve a Divi > Opciones del Tema, en la pestaña Integración.
  4. Pega el código en la opción Agregar código al <head> de su blog.
Descargando el código de Font Awesome
Opciones de Divi

Cómo añadir iconos de Font Awesome

  1. Entra en fontawesome.com/icons y busca el icono que quieras utilizar.
  2. Selecciona el icono que desees y haz clic en la línea de código, así se copiará.
  3. Accede a tu web, al lugar en el que quieras poner ese icono. Es una línea de código por lo que:
      • Puedes pegarlo en un módulo de texto, pero usando la pestaña Texto (no visual).
      • Puedes pegarlo en un módulo de código.
Copiar el código del icono
Pegando el código del icono en Divi

¡Ya está! Ya sabes lo básico, pero te voy a dar un bonus. ¿Cómo puedes cambiar el aspecto del icono?

Cómo cambiar el aspecto de los iconos

Aquí tienes unas cuantas formas de modificar el aspecto de los iconos. ¡Por supuesto, puedes combinar los códigos para por ejemplo cambiar el tamaño de un icono y rotarlo!

Cambiar el tamaño

Añade a la línea de código fa-2x para multiplicar su tamaño por 2. Cambia el número 2 por otro para conseguir más tamaños.

 
<i class="fas fa-ambulance fa-5x"></i>

Hacer que gire

Añade fa-spin a la línea de código

<i class="fas fa-arrow-alt-circle-right fa-spin"></i>

Rota el icono

Añade a la línea de código fa-rotate-90 para girarlo 90 grados, o cambia el número 90 por 180 o 270 para conseguir otra rotación.

<i class="fas fa-vial fa-rotate-90"></i>

Voltea en espejo el icono

Añade a la línea de código fa-flip-horizontal o fa-flip-vertical.

<i class="fas fa-flag fa-flip-horizontal"></i>

Encuadrar el icono

Añade fa-border.

<i class="fas fa-moon fa-border"></i>

Cambiar el color

Aunque esto es un poco más complejo, puedes cambiar el color añadiendo style=»color: #ff0000″, cambiando #ff0000 por el color hexadecimal que quieras. Aquí tienes un selector de colores hexadecimales para que puedas elegir el color que quieras y copiar su código.

<i class="fas fa-moon" style='color: #ff0000'></i>
Abrir chat