Hoy te voy a mostrar cómo usar Font Awesome en Divi, específicamente reemplazando los iconos del módulo Blurb.
Font Awesome es una librería muy popular en muchos sitios web que actualmente está en la versión 5 y están trabajando en la versión 6. Si bien hay muchas opciones para estilizar cada ícono, por ahora solo te mostraré como incluir Font Awesome en Divi y además como reemplazar los iconos de módulo Blurb por un ícono de Font Awesome!
Paso 1: Agrega Font Awesome a tu sitio web
A partir de Font Awesome 5, deberas crear una cuenta en Font Awesome.
Después de creada tu cuenta, en la página de Font Awesome encontraras unos Font Awesome Kits. Es una manera de administrar los diferentes kits de iconos. No veremos el detalle de ello así que solo copia el kit que es creado para ti por defecto en el botón Copy Kit Code y agrégalo en el <head> de tu html.
En Divi, agregar código en el <head> de tu html lo puedes hacer fácilmente desde el menú Divi -> Theme Options -> Integration y luego pon el código en la caja de texto que dice “Add code to the <head> of your blog”
Dale click en “Save Changes” para que se guarden tus cambios.
<script src="https://kit.fontawesome.com/<AquiVaelCodigoDeTuKit.js" crossorigin="anonymous"></script>Paso 2: Modificar el módulo Blurb para mostrar un ícono
Configura el uso de ícono en el módulo Blurb
Visita la página donde está el blurb que deseas editar y configura el uso de ícono y selecciona un ícono. El ícono que elijas no importa, pero debe haber uno seleccionado o no se agrega el ícono al módulo.
Define el tamaño del ícono en 0
Define el tamaño del ícono en 0 utilizando Font Size.
Agrega tu clase CSS al módulo blurb
Agrega una Clase CSS al módulo para que la uses en el siguiente paso. En este ejemplo puse una clase llamada pr-fa-desem
Paso 3: Agrega el ícono que deseas
Ahora deberás agregar el CSS como sigue y reemplazar el valor de “content” por el Unicode del ícono que te interesa. Este link tiene todos los iconos para que escojas el que te gusta: https://fontawesome.com/cheatsheet
En este ejemplo estoy usando un ícono de reciclaje cuyo código Unicode es f1b8
.pr-fa-desem .et-pb-icon::after {
content: "\f1b8";
font-family: "FontAwesome" !important;
font-size: 48px !important;
}
Conclusión
Espero que haya sido de utilidad las instrucciones para utilizar iconos Font Awesome en los blurb de Divi.
