Divi viene repleto de muchos íconos. Aunque tiene cerca de 400 iconos, a veces quieres un icono que no está en la lista. Muchos usuarios recurren a Font Awesome, que es una de las fuentes más populares de iconos gratuitos . Hay varias formas de llevar los íconos de Font Awesome a Divi, pero uno de los métodos más fáciles que he visto es a través de un complemento de terceros llamado Divi Font Awesome .
Divi Font Awesome no agrega nuevos módulos o funciones. Simplemente agrega íconos de Font Awesome a cualquier módulo que ya tenga íconos. En este artículo, veremos cómo funciona con esos módulos y veremos algunos ejemplos en acción.
Una vez que haya instalado y activado el complemento, deberá configurarlo. En el menú del tablero, ve a Configuración > Divi Font Awesome . Aquí puede ingresar su clave de licencia, ID de código de inserción de CDB y elegir el formato (elija entre JavaScript y CSS). Para obtener su ID de código de inserción de CDN, haga clic en el enlace etiquetado Cuenta de CDN de Font Awesome aquí .
Esto lo lleva al sitio web de Font Awesome CDN donde puede iniciar sesión para obtener su código.
El ID es el código que pegará en el campo de ID del código de inserción de CDN. Primero deberá proporcionar algunos parámetros. Asigne un nombre al código y elija la versión entre JavaScript y CSS. Si elige JavaScript, también puede elegir las mejores prácticas de accesibilidad automática y la carga asíncrona de iconos. Copie el ID y guárdelo cuando haya terminado. Puedes editarlo más tarde si quieres.
Nota: probé ambos formatos con múltiples opciones. El resultado dentro de Divi se ve igual.
Pegue el ID y elija el formato que coincida con el que eligió cuando configuró el ID. Usé JavaScript cuando creé la ID, así que elegí JavaScript aquí para que coincida. Guarde los cambios y estará listo para usar Divi Font Awesome.
Uso de la fuente Divi Awesome
En lugar de crear nuevos módulos, Divi Font Awesome agrega íconos de Font Awesome a sus módulos actuales. La imagen de arriba es el módulo de botones estándar sin Divi Font Awesome. Esto es alrededor de 380 fuentes. No está mal en realidad.
Aquí está el mismo módulo de botones con Divi Font Awesome instalado. La pequeña línea de desplazamiento (término técnico) es mucho más pequeña, lo que indica que tiene más iconos para desplazarse. Ahora tenemos más de 600 íconos adicionales, lo que hace que el total se acerque a 1000.
Los íconos se agregan al final de la lista de íconos de Divi. Esto te ayuda a saber qué íconos son Divi predeterminados y cuáles son de Font Awesome. Los nuevos iconos se diseñan junto con los iconos originales. Lo que significa que todas las configuraciones, ajustes, CSS, etc., se aplican a los íconos de Font Awesome sin ningún trabajo adicional de su parte.
Ejemplos impresionantes de fuentes Divi
Estos son los íconos dentro del módulo de llamada a la acción. Para los primeros ejemplos, usaré la página de destino de la Agencia de SEO, que tiene muchos botones que usan una flecha hacia la derecha. Puede ver esto en el módulo de llamada a la acción.
Aquí está el ícono original dentro del botón. Se ve bien. Es funcional y fácil de entender. Con Divi Font Awesome podemos hacer que los botones se vean diferentes a los de los demás fácilmente.
Lo estoy reemplazando con este: un dedo apuntando en la misma dirección que la flecha.
Realiza la misma función pero tiene un aspecto único.
Aquí está la sección de servicios de la página de destino de la Agencia SEO. Utiliza imágenes en lugar de iconos (que es una opción extremadamente versátil) y módulos de llamada a la acción para el texto y leer más botones. Quiero reemplazar las imágenes con anuncios publicitarios para poder usar íconos de Font Awesome.
Aquí está el mismo diseño usando anuncios publicitarios. Estos iconos son los integrados en Divi. Los estoy usando primero para poder diseñarlos y ver si los íconos de Font Awesome mantienen el mismo estilo.
He diseñado el color con #7676ff para que coincida con partes de las imágenes originales. Configuré la ubicación a la izquierda y ajusté el tamaño de fuente del ícono a 26 píxeles. A continuación, cambiaré los íconos a los de Font Awesome.
Aquí está el diseño usando iconos de Font Awesome. No he hecho cambios en el estilo. Estos íconos usan el mismo estilo que los íconos de Divi.
Ahora agregué un borde usando #a6a6ff. Cambié la ubicación a la parte superior y ajusté el tamaño de fuente del ícono a 32. Para ayudar con la alineación central, centré la orientación del texto de la llamada a la acción y la alineación de los botones. También coloqué 40 píxeles para el relleno en la parte inferior de la fila superior para que las dos filas de anuncios se mantengan separadas entre sí.
Este hace que el ícono sea blanco, usa el círculo con el color #a6a6ff y elimina el borde del círculo. He dejado las tallas igual que en el ejemplo anterior.
Esta vez cambié un poco el diseño. Coloqué los íconos a la izquierda con el texto a la derecha. Establecí el color del icono en #8b21bb, eliminé el círculo y configuré el tamaño de fuente del icono en 64 píxeles. También reemplacé el ícono de flecha para el botón de llamada a la acción con uno de Font Awesome. El nuevo ícono tomó automáticamente el estilo que se configuró para el ícono de Divi. No hice ningún cambio en este icono.
Esta es la página de la tienda del paquete de diseño del restaurante. He añadido iconos a cada uno de los botones. No realicé ningún cambio en el estilo porque quería que se combinaran con el diseño que ya está allí, pero deshabilité la opción Solo mostrar ícono al pasar el mouse por botón .
Esta es la página de precios del paquete de diseño de Photo Marketplace. Utiliza íconos para tarjetas de crédito y pasarelas de pago para mostrar varias formas en que los visitantes pueden realizar un pago.
Este es un ejemplo de los íconos de Font Awesome dentro de una superposición de una cartera filtrada.
Aquí está Divi Font Awesome dentro de una superposición de blog. Esta es la página del blog del paquete de diseño de la agencia de viajes.
Uso de Divi Font Awesome en el personalizador de temas
También puede acceder a los íconos de Font Awesome desde el Personalizador de temas . Todos los más de 600 íconos de Font Awesome están disponibles en este menú. Aquí seleccioné el menú de botones y elegí un ícono para usar como predeterminado.
Usando Divi Font Awesome con Extra
Dado que Divi Font Awesome se agrega a Divi Builder, es lógico que funcione con Extra . Este es el diseño de la página de inicio de la revista en el Generador de categorías. Todos los íconos de Font Awesome están disponibles en los módulos que incluyen íconos.
Licencia y documentación de Divi Font Awesome
El complemento se puede instalar en sitios ilimitados que crea para usted o sus clientes. Incluye 6 meses de soporte y actualizaciones de por vida. La documentación se proporciona como un video que lo guía a través de la configuración y muestra ejemplos del complemento en uso.
Puede ver más información sobre el complemento en el sitio web del desarrollador .
pensamientos finales
Divi Font Awesome es fácil de configurar y usar. El video lo guía si desea ver cómo se hace. Dado que agrega íconos a los módulos Divi , elegir sus íconos funciona igual que con los íconos Divi normales. Su única característica es que agrega más de 600 íconos de Font Awesome a su lista existente de íconos disponibles. La única diferencia que notará es la cantidad de íconos disponibles.
También funcionó muy bien con el Personalizador de temas, Extra, e incluso conseguí que funcionara con complementos de terceros que utilizan íconos Divi. Si está buscando funciones adicionales, este complemento no es lo que está buscando. Si solo desea una manera fácil de agregar iconos de Font Awesome, vale la pena echarle un vistazo a Divi Font Awesome.
Queremos escuchar de ti. ¿Has probado Divi Font Awesome? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada a través de Alex Gorka / shutterstock.com