Divi Upload Icons es un complemento de terceros para Divi que facilita agregar más íconos a Divi Builder. A diferencia de otros complementos de íconos que solo integran Font Awesome e íconos de materiales, este le permite agregar cualquier conjunto de íconos que desee. Solo tiene que ser un tipo de archivo compatible y utiliza los cinco tipos de archivo más populares.
El complemento agrega un cargador a su instalación de WordPress donde arrastrará y soltará sus archivos de íconos. Luego, los íconos se agregan a cualquier módulo Divi que muestre íconos. Al igual que los íconos Divi estándar, cualquier conjunto de íconos que cargue se puede diseñar con Divi Builder. En este punto destacado del complemento Divi, echaremos un vistazo a los iconos de carga de Divi y veremos lo fácil que es usarlo.
Cargue y active el complemento como de costumbre, y luego vaya a Configuración > Iconos de carga de Divi en el menú del tablero para ingresar su clave de activación.
Subir iconos con Divi Upload Icons
También en la pantalla de configuración está la función de carga. Aquí, subirás tus íconos. Los iconos deben estar en formato .eot, .svg, .ttf, .woff, .woff2 y .css. Puede descargar íconos de cualquier fuente que desee y usarlos con los íconos de carga Divi siempre que estén en estos formatos e incluyan el archivo CSS. Para instalar los íconos, arrástrelos y suéltelos en la ventana de carga. Las instrucciones se proporcionan en el área de carga y hay un breve video que demuestra cómo usarlo.
Los iconos a veces incluyen múltiples formatos. Debe cargar los archivos CSS junto con los íconos, y los íconos deben ser un archivo compatible. En este ejemplo, estoy subiendo varios conjuntos. Incluyen varios tipos de archivos y archivos CSS. A los de la imagen de arriba con los iconos naranjas les faltan archivos.
Los archivos de este ejemplo son correctos. He subido tipos de archivos compatibles con sus archivos CSS. Ahora tengo más de 2500 iconos nuevos. Los descargué de iconfont , Dripicons , Foundation Icon Fonts e Map Icons . El desarrollador mantiene una lista de íconos que han sido probados y que puedes usar con los íconos de carga de Divi. Por supuesto, hay muchos más iconos que puedes usar.
A modo de comparación, aquí está el módulo de propaganda de Divi antes de que subiera los nuevos íconos. Divi incluye 360 iconos. Puedes hacerte una idea de cuántos son mirando la longitud de la barra en la ventana.
Esta imagen incluye todos los 2500 íconos que cargué. Ahora tengo muchos más íconos para elegir y la barra de la ventana es mucho más pequeña. Puede ver los íconos en Visual Builder, pero no incluye las nuevas herramientas de filtro y búsqueda.
Filtro y búsqueda de iconos de carga de Divi
Se agrega una nueva herramienta de filtro si usa el generador clásico. Puede abrir o cerrar el filtro. Está cerrado en este ejemplo.
Haga clic en Filtrar iconos para ver las familias de iconos que ha instalado y una función de búsqueda. Haga clic en cualquiera de las familias de iconos para ver solo esa familia. También puede ver todas las familias o cerrar la opción de filtro y búsqueda. El filtro funciona rápido. Al hacer clic en una familia de íconos o buscar íconos, se muestran los íconos casi instantáneamente, incluso con mis 2500 íconos. Estoy seguro de que depende en parte de la cantidad de íconos que haya instalado, por lo que su experiencia puede ser diferente.
En este ejemplo, seleccioné los íconos del mapa que cargué. Hay casi 200 iconos en esta familia de iconos.
Aquí están los iconos de la Fundación . También tiene cerca de 200 iconos.
Aquí están las Icofonts . Esta familia de íconos agrega más de 2000 íconos.
Puede buscar por palabra clave o por nombre de familia de iconos. Los resultados incluyen iconos de todas las familias de iconos que has subido y los que ya estaban disponibles en Divi.
Sería interesante que después de la búsqueda funcionara el filtro para ver los resultados por familia de iconos. Le muestra el nombre con la familia de íconos cuando pasa el mouse sobre cada ícono. En la imagen de arriba, estoy sobre el segundo icono de la derecha. Esto es lo suficientemente útil, por lo que el filtro de búsqueda no es realmente una prioridad alta.
Ejemplos de iconos de carga Divi
Por supuesto, una de las ventajas de usar íconos es la capacidad de ajustar tamaños, colores, agregar círculos, bordes, etc., usando Divi Builder. El complemento y los íconos funcionan con Visual Builder, pero no muestra los íconos en la vista en vivo. Este ejemplo muestra los íconos en la selección de íconos del módulo, pero la vista previa en vivo no funciona.
Los íconos se muestran bien en la página o publicación publicada. Todavía puede usar Visual Builder para personalizar el tamaño y los colores, solo que no los verá en la vista previa en vivo. Prefiero Visual Builder cuando personalizo colores y tamaños, pero usaré Classic Builder para el resto de los ejemplos. Esta es la página de destino del paquete de diseño de hipotecas.
Los íconos se ven geniales y se pueden personalizar como los íconos estándar de Divi. Encontré todos estos íconos usando la función de búsqueda. Esta es la configuración predeterminada.
Cambié los colores para que coincidieran con el diseño, al igual que las imágenes originales que usó el diseño.
Para este, seleccioné usar el tamaño de fuente para el ícono y lo ajusté a 32px. Está empezando a parecerse más al diseño original, pero con mis íconos.
En este, he agregado un círculo a cada ícono. Cambié los colores de los círculos y los íconos, y agregué un borde al segundo y cuarto desde la izquierda. Elegí diferentes colores solo para mostrar cómo se ven.
Así es como se ven los íconos colocados a la izquierda del texto.
En este, he reemplazado las imágenes en el diseño del campo de golf con íconos. He usado colores del diseño y los he dimensionado a 48px.
Para este ejemplo, he deshabilitado el ajuste de tamaño de fuente para los íconos. Este es el tamaño predeterminado, de 96 px. Combinan bien con el diseño del diseño.
También se ven increíbles cuando se usa la configuración del ícono circular. Cambié el color del ícono a blanco y usé el bronceado del diseño como el color del círculo. Los iconos todavía están en 48px.
Para este, he usado uno de los tonos de verde del diseño. Hay muchas posibilidades con las personalizaciones de Divi Builder.
Precio de los iconos de carga de Divi
Los íconos de carga de Divi cuestan $ 24.97. Tiene uso ilimitado y actualizaciones. Puede comprar iconos de carga Divi en el mercado .
pensamientos finales
Divi Upload Icons facilita la carga de los iconos exactos que desea de cualquier biblioteca de fuentes. La idea detrás del complemento es que, en lugar de instalar miles de íconos que no necesita, puede instalar los íconos exactos y las familias de íconos que desea usar con su sitio web Divi.
Dado que está cargando los íconos en Divi Builder, se almacenan en su servidor. Cargué más de 2500 íconos y no tuve problemas de velocidad con Divi Builder o mi sitio web.
Tenga en cuenta que requiere fuentes con el archivo de fuente y el archivo CSS. Es fácil cargar las fuentes incorrectamente (adivina cómo lo sé). Asegúrate de seguir las instrucciones exactamente o las fuentes serán cuadrados vacíos. Además, no funciona con Font Awesome 5, pero funciona muy bien con 4.7.
Me gustó usar los íconos de carga de Divi. Me gustaría usarlo con Visual Builder, pero funciona muy bien con el constructor clásico. Me tomó un intento adicional asegurarme de que tenía los archivos correctos, pero considerando cuántas familias de íconos hay en Internet, vale la pena tomarse el tiempo para encontrar íconos con los archivos correctos. Los iconos no son difíciles de encontrar y el desarrollador proporciona muchos enlaces a iconos que ya ha probado.
Si está interesado en agregar sus propios íconos al Divi Builder, vale la pena echarle un vistazo a los íconos de carga de Divi.
Queremos escuchar de ti. ¿Has probado los iconos de carga de Divi? Háganos saber lo que piensa al respecto en los comentarios.
Imagen destacada vía hanss / shutterstock.com