Lo más destacado del complemento Divi: Divi Icon King

Instalación, activación y configuración de Divi Icon King

Cargue y active el complemento de forma normal. Una vez que el complemento esté activado, deberá ingresar a la configuración y elegir sus bibliotecas de iconos.

En el menú del tablero, ve a Configuración , Divi Icon King . Aquí puede habilitar Font Awesome y Material Icons . Haga clic en las casillas de lo que desea habilitar y seleccione Guardar cambios . Esto eleva la cantidad de conjuntos de íconos disponibles dentro de Divi Builder a casi 2000 (alrededor de 1987, pero no los conté).

Font Awesome Icons : añade 675 iconos vectoriales escalables.

Íconos de materiales : agrega 931 fuentes livianas de íconos web de Google.

Los íconos agregados no se almacenan en su servidor. En su lugar, se almacenan en un CDN y se traen a medida que los carga. Solo carga lo que revisas. En otras palabras, no está cargando todo y solo te muestra lo que has revisado. Si no está marcada, no carga.

El código del complemento se agrega a Divi y funciona con cualquier módulo que use íconos. Esto significa que no hay módulos especiales que deba usar. Ahora verá todos los íconos nuevos dentro de cada módulo Divi que usa íconos.

Iconos regulares de Divi

Divi viene con alrededor de 380 íconos. La imagen de arriba es un módulo de Blurb antes de instalar Divi Icon King. Dentro de la pestaña Contenido, seleccione Usar icono para ver los iconos que están disponibles.

Filtros Divi Icon King

Divi Icon King agrega un filtro a las selecciones de íconos. Haga clic en el botón etiquetado Iconos de filtro para ver los filtros.

Esto abre un cuadro de búsqueda donde puede ingresar lo que está buscando. También puede hacer clic en el texto debajo del cuadro de búsqueda y ver iconos de Temas elegantes, Contorno, Sólido, Todo o seleccionar Cerrar para cerrar el filtro. En este momento no he habilitado Font Awesome o Material Icons.

Después de habilitar Font Awesome e Iconos de materiales, ahora son una opción dentro del filtro. Ahora tengo casi 2000 íconos, y el único esfuerzo que tomó fue instalar el complemento y habilitar las dos marcas de íconos que quería agregar.

Al hacer clic en FontAwesome, solo se muestran los íconos de Font Awesome.

Al hacer clic en Material, solo se muestran los iconos de material de Google.

Estos son los iconos con contornos.

Estos son los iconos sólidos.

Búsqueda de iconos

Los resultados de la búsqueda dependen completamente de cómo se etiquetan los iconos. Esto significa que algunas búsquedas pueden no funcionar tan bien como otras. Puede encontrar algo escribiendo pizza , pero nada es lo que escribe en comida .

También encuentra porciones de palabras (como se puede ver en la imagen de arriba). También incluirá iconos que contengan la parte de la palabra que buscaste. Por ejemplo, escribí auto e incluía íconos para autos , así como carrito , tarjeta , etc.

Aquí he buscado carrito y solo me da carritos de compras.

También puede utilizar la búsqueda para averiguar qué conjunto de iconos proporcionó el icono. Al desplazarme vi el ícono de Star Wars Rebellion. Busqué rebelde y me dio el icono en el primer intento. Quería saber qué conjunto de íconos lo proporcionaba, así que hice clic en FontAwesome y me desplacé hasta que encontré el ícono rebelde resaltado.

Encontré el filtro útil incluso sin usar FontAwesome y Material Icons porque ayuda a ordenar y encontrar los íconos de Elegant Themes, lo que acelera el tiempo de desarrollo. No presione la tecla Intro cuando busque. Esto cerrará el módulo.

Ejemplos de Divi Icon King

Aquí están algunos ejemplos. La mayoría son anuncios publicitarios, botones e íconos superpuestos que reemplacé los originales con los de Font Awesome o Material Icons.

Desde que encontré el icono de Rebelión no pude resistirme a usarlo. Aquí hay un ejemplo usando el paquete de diseño gratuito DiviStar de Geno Quiroz. Agregué anuncios publicitarios y el ícono rebelde de Font Awesome, cada uno con un color diferente. Los hice lo más grande posible. Los controles son los mismos que los iconos normales de Elegant Themes.

Este utiliza el paquete de diseño Code School gratuito de Elegant Themes . Reemplacé los primeros dos íconos (los anuncios publicitarios para Desarrollo web y Javascript, que en realidad usan imágenes en lugar de íconos), cambié sus colores y tamaño, y agregué un círculo para que coincida con los otros íconos. El primero es de Material Icons. El segundo es de Font Awesome.

Este utiliza el paquete de diseño ET gratuito llamado Design Agency . Incluye un botón con una flecha que se muestra al pasar el mouse. Reemplacé la flecha con un dedo señalador de Font Awesome.

Este paquete de diseño también utiliza iconos superpuestos para las imágenes. Reemplacé los íconos con los de Material Icons.

Blurbs mostraba pequeños iconos sobre unas pocas líneas de texto. Eliminé el texto y reemplacé los íconos con íconos de Font Awesome y Material Icons. Mantuve los colores pero hice los íconos de tamaño completo a 120 píxeles.

Este es del paquete de diseño de restaurante gratuito de Elegant Themes . Agregué una superposición con un ícono a las imágenes de la publicación del blog y coloqué un ícono de tenedor y cuchara de Material Icons (como puede ver en la imagen central).

Usando Divi Icon King con Extra

Divi Icon King funciona muy bien con Extra , e incluso funciona con el Creador de categorías. Este es un vistazo al paquete de diseño de la agencia de diseño con un ícono de YouTube dentro del botón de Font Awesome.

Este usa un ícono de buzón de Material Icons para el botón Enviar.

He aquí un vistazo a cómo funciona con el Creador de categorías. Esta imagen muestra el Módulo de publicaciones del Generador de categorías con un ícono de café de Font Awesome como ícono en la superposición de imágenes.

Me alegra ver que funciona con Extra y el Creador de categorías. Por lo general, los desarrolladores externos dejan de lado Extra, pero me encanta Extra como plataforma de blogs y publicación, y mi sitio web más popular está creado con Extra.

Uso de Divi Icon King con complementos de terceros

Divi Icon King funciona con complementos de terceros que usan íconos. He aquí un vistazo a Content Intense .

Content Intense muestra el blog de acuerdo con mis selecciones (seleccioné Alps que permite una superposición). Agregué un ícono de Material Icons en la superposición del blog, que puede ver en la imagen central.

Documentación y Soporte

La documentación se proporciona en el sitio web del desarrollador. Incluye una demostración en video, información de configuración y una demostración rápida.

El soporte se proporciona en el sitio web del desarrollador. Los únicos problemas que tuve fueron con mi propio sitio de prueba (necesitaba borrar mi caché para que los íconos se mostraran correctamente en el Generador de categorías de Extra). Me puse en contacto con el soporte y el problema se resolvió en minutos.

• El complemento está disponible para su compra en la mayoría de los mercados de Divi.

pensamientos finales

Divi Icon King es una manera fácil de agregar cientos de íconos gratuitos a Divi para usarlos en anuncios publicitarios, superposiciones, botones o cualquier otro módulo que use íconos. Funciona con Extra e incluso funciona con complementos de terceros siempre que sigan los estándares de codificación de ET. Si está buscando una manera fácil de agregar íconos gratuitos de Font Awesome y Material Icons a Divi, vale la pena echarle un vistazo a Divi Icon King.

Queremos escuchar de ti. ¿Has probado Divi Icon King? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Irina Adamovich / shutterstock.com