Cada sitio web que visitas contiene cientos de elementos, incluso si no es obvio. Eso significa imágenes, texto, subtítulos y, por supuesto, íconos. Sin embargo, usar los mismos íconos aburridos que en cualquier otro sitio puede hacer que su sitio parezca un «cortador de galletas», por lo que es importante buscar opciones versátiles como las que se encuentran en Ikomoon.
Con el conjunto correcto de íconos, puede hacer que su sitio web se vea más profesional. En este artículo, le presentaremos el popular creador de iconos, SVG y vectores y le enseñaremos cómo agregar sus elementos a WordPress. Además, le mostraremos cómo usarlos con Divi.
¡Sigamos adelante!
Suscríbete a nuestro canal de YouTube
Una introducción a los iconos y vectores de Icomoon
Icomon es un servicio que le brinda acceso a miles de íconos y vectores únicos gratuitos y premium. Además de los íconos en sí, Icomoon también ofrece una aplicación en línea que le permite generar SVG y fuentes para los elementos que desea usar en su sitio.
En la página de inicio de Icomoon, puede encontrar tres paquetes de iconos diferentes. Está el mismo Icomoon, Lineariconsy linda. Icomoon y Linearicons ofrecen versiones gratuitas con cientos de elementos cada una, mientras que Lindua es un paquete premium únicamente.
Icomoon ofrece tres paquetes de iconos diferentes. Hay una versión gratuita que admite formatos SVG, PDF, EPS, Ai y PSD, así como PNG en muchos tamaños. Los planes premium avanzados vienen con más íconos y opciones de personalización. Sin embargo, según nuestra experiencia, el nivel gratuito de Icomoon es un buen comienzo para la mayoría de los usuarios.
Recuerda, sin embargo, que para poder utilizar estos iconos, primero debes integrarlos con WordPress. Sin embargo, no se preocupe, lo cubriremos en la siguiente sección.
Las características más importantes del nivel libre de Icomona:
- Acceso a casi 500 iconos.
- Puede exportar iconos a varios formatos, incluidos SVG, TTF, PDF, EPS, Ai y PSD.
- PNG disponible en muchos tamaños.
Precio: Icomon ofrece un paquete gratuito y dos niveles premium desde $ 39 por una licencia | Más información
Cómo agregar iconos y vectores de Icomoon a WordPress
Hay dos formas de agregar elementos de Icomoon a WordPress. El primer enfoque es utilizar Aplicación de Internet Icomoonque le permite seleccionar los iconos que desea usar y exportarlos como archivos SVG:
Para hacer esto, puede seleccionar los iconos como se ve en el ejemplo anterior y hacer clic en Genera SVG y más botón en la parte inferior de la página:
Icomoon generará entonces .CÓDIGO POSTAL archivo que contiene archivos SVG para iconos seleccionados. Puede descargar el archivo haciendo clic en el botón correspondiente en la parte inferior de la página siguiente:
Ahora todo lo que queda por hacer es cargar los archivos SVG que desea usar en WordPress e insertarlos como multimedia. Si aún no ha activado la compatibilidad con SVG en WordPress, consulte este tutorial que escribimos anteriormente sobre cómo hacerlo.
El segundo método para usar los íconos de Icomoon es usar un complemento. Hay algunas opciones útiles que le permiten importar paquetes de íconos a WordPress; una opción destacada es Iconos SVG de WP:
Este complemento en particular le permite acceder a todos los elementos de Icomoon en el paquete gratuito al momento de la activación. Una vez habilitado, podrá verificar todos los íconos de Icomoon desde la pestaña WP SVG Icons en su tablero de WordPress:
Al seleccionar el ícono, se mostrará qué atajo usar en Código corto véase más arriba. Si observa detenidamente, notará que el complemento menciona un Insertar icono botón en el editor. Sin embargo, esta función aún no funciona con el Editor de bloques, por lo que tendrá que confiar en los accesos directos por ahora.
Para agregar cualquier ícono a sus páginas o publicaciones, abra el editor y agregue el widget Shortcode. En él, pegue el acceso directo que copió anteriormente:
¡Eso es casi todo! Ahora, cuando obtenga una vista previa de una página o publicación, el ícono de Icomoon aparecerá donde lo coloque. El problema es que el Editor de bloques a menudo nos impide colocar elementos en las ubicaciones muy precisas en las que entra Divi.
Integración de iconos y vectores de Icomoon con Divi
Agregar vectores Icomoon con Divi funciona igual que sin él. En otras palabras, aún tendrá que confiar en los accesos directos generados por el complemento WP SVG Icons. Para agregarlos, simplemente usará el módulo Código de Divi:
Ahora que ha guardado los cambios en el módulo, está listo para comenzar. La principal diferencia con Divi es que tienes mucho mejor control sobre los diseños de página y publicación. Esto significa que puede colocar íconos de Icomoon prácticamente en cualquier lugar sin jugar con CSS (¡a menos que sea un mago de la codificación!).
Según nuestra experiencia, la mejor manera de usar dichos íconos es usar el módulo Divi Blurb. Esto le permite poner íconos en sus notas y completar su propia colección Divi, que ya incluye muchas opciones de íconos.
Solicitud
No hay escasez de paquetes de íconos gratuitos que puede usar en su sitio web. Sin embargo, el mejor enfoque es ceñirse a las opciones de alta calidad que sabe que funcionan bien con WordPress y Divi, por supuesto. Icomoon es una de esas herramientas y viene con cientos de íconos, SVG y vectores que puede usar en su sitio web.
La forma más fácil de usar íconos y vectores de Icomoon en WordPress es usar un complemento como Iconos SVG de WP. Con él, podrá generar accesos directos que puede usar tanto en el editor de bloques como en Divi, por lo que es beneficioso para todos.
¿Tiene preguntas sobre cómo agregar íconos personalizados a Divi? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen de la miniatura de un artículo de StockVector / shutterstock.com
