Uso de iconos y vectores de Icomoon con WordPress


Cada sitio web que visita incluye cientos de elementos, incluso si no es evidente. Esto significa imágenes, texto, subtítulos y, por supuesto, iconos. Sin embargo, usar los mismos íconos aburridos que cualquier otro sitio puede hacer que el suyo parezca "cortador de cookies", por lo que es importante buscar opciones versátiles como las que se encuentran en Icomoon.

Con el conjunto de iconos adecuado, puede hacer que su sitio web se vea mucho más profesional. En este artículo, le presentaremos el ícono popular, SVGy herramienta vectorial, y también le enseñará cómo agregar sus elementos a WordPress. Además, le mostraremos cómo usarlos con Divi.

¡Hagámoslo!

(incrustar) https://www.youtube.com/watch?v=GRcScnygd-g (/ incrustar)

Suscríbete a nuestro canal de Youtube

Introducción a los iconos y vectores de Icomoon

El logo de Icomoon.

Icoomon es un servicio que le brinda acceso a miles de íconos y vectores únicos gratuitos y premium. Además de los iconos en sí, Icomoon también ofrece una aplicación en línea que le permite generar SVG y fuentes de los elementos que desea utilizar en su sitio web.

En la página de inicio de Icomoon, puede encontrar tres paquetes de iconos diferentes. Ahí está Icomoon en sí, Lineariconsy Lindua. Icomoon y Linearicons ofrecen versiones gratuitas, cada una con cientos de elementos, mientras que Lindua es un paquete exclusivo.

Icomoon en sí ofrece tres paquetes de iconos diferentes. Existe la versión gratuita, que admite los formatos SVG, PDF, EPS, Ai y PSD, así como PNG en varios tamaños. Los planes premium avanzados vienen con más íconos y opciones de personalización. Sin embargo, en nuestra experiencia, el nivel gratuito de Icomoon es suficiente para comenzar para la mayoría de los usuarios.

Sin embargo, tenga en cuenta que para usar estos íconos, deberá integrarlos con WordPress de antemano. Sin embargo, no se preocupe, lo cubriremos en la siguiente sección.

Características clave del nivel gratuito de Icomon:

  • Acceso a casi 500 iconos.
  • Puede exportar iconos a varios formatos, incluidos SVG, TTF, PDF, EPS, Ai y PSD.
  • PNG disponibles en varios tamaños.

Precio: Icomon ofrece un paquete gratuito y dos niveles premium desde $ 39 por una sola 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 implica el uso de Aplicación web Icomoon, que le permite seleccionar los iconos que desea usar y exportarlos como SVG:

Seleccionar iconos en Icomoon.

Para hacer esto, puede seleccionar iconos como ve en el ejemplo anterior, y hacer clic en el Generar SVG y más botón en la parte inferior de la página:

Generando SVG.

Icomoon generará entonces un .Código Postal archivo que incluye SVG para los iconos seleccionados. Puede descargar el archivo haciendo clic en el botón correspondiente en la parte inferior de la página siguiente:

Descarga de iconos.

Ahora, todo lo que queda es cargar los archivos SVG que desea usar en WordPress e insertarlos como medios. Si aún no ha habilitado la compatibilidad con SVG en WordPress, mira este tutorial anteriormente escribimos sobre cómo hacerlo.

El segundo método para utilizar los iconos de Icomoon implica el uso de un complemento. Hay varias opciones útiles que le permiten importar paquetes de iconos a WordPress; una opción destacada es Iconos de WP SVG:

El complemento WP SVG Icons.

Este complemento en particular le permite acceder a cada elemento de Icomoon dentro del paquete gratuito después de la activación. Una vez habilitado, podrá ver todos los íconos de Icomoon desde la pestaña WP SVG Icons en su tablero de WordPress:

La pantalla de selección de iconos de WP SVG.

La selección de un icono le mostrará qué código corto utilizar en el Código corto sección vista arriba. Si observa de cerca, notará que el complemento menciona un Insertar icono botón dentro del editor. Sin embargo, esta funcionalidad aún no funciona con el Editor de bloques, por lo que tendrá que confiar en los códigos cortos por ahora.

Para agregar el icono que desee a sus páginas o publicación, abra el editor y agregue un widget de código corto. Dentro de él, pega el código corto que copiaste antes:

La pantalla de diálogo Shortcode.

¡Eso es practicamente todo! Ahora, cuando obtenga una vista previa de la página o publicación, el ícono de Icomoon aparecerá donde lo colocó. El problema es que el Editor de bloques a menudo no nos permite colocar elementos en ubicaciones muy precisas, que es donde entra Divi.

Integración de iconos y vectores de Icomoon con Divi

Agregar vectores Icomoon con Divi funciona de la misma manera que sin él. En otras palabras, todavía necesitará confiar en los códigos cortos que genera el complemento WP SVG Icons. Para agregarlos, simplemente usará Módulo de código de Divi:

Módulo de texto de Divi.

Una vez que guarde los cambios en el módulo, estará listo. La principal diferencia con Divi es que obtienes un control mucho mejor sobre los diseños de tu página y publicación. Esto significa que puede colocar íconos de Icomoon prácticamente en cualquier lugar que desee sin tener que jugar con CSS (¡a menos que sea un asistente de codificación!).

En nuestra experiencia, la mejor manera de usar íconos como estos es junto con el módulo Blurb de Divi. Esto te permite colocar íconos encima de tus anuncios y complementar la propia colección de Divi, que ya incluye muchas opciones de íconos.

Conclusión

No hay escasez de conjuntos de iconos gratuitos que puede utilizar en su sitio web. Sin embargo, el mejor enfoque es seguir con opciones de alta calidad que sepa que funcionan bien con WordPress y, por supuesto, Divi. Icomoon es una de esas herramientas e incluye cientos de iconos, SVG y vectores que puede utilizar en su sitio web.

La forma más sencilla de utilizar los iconos y vectores de Icomoon en WordPress es con un complemento como Iconos de WP SVG. Con él, podrá generar códigos cortos que puede usar tanto con el Editor de bloques como con Divi, por lo que es beneficioso para todos.

¿Tiene alguna pregunta sobre cómo agregar íconos personalizados a Divi? ¡Hablemos de ellos en la sección de comentarios a continuación!

Imagen en miniatura del artículo de StockVector / shutterstock.com