¿Cómo añadir iconos en WordPress y qué plugins utilizar?

Seguro que ahora, tienes más curiosidad por insertar iconos en WordPress dentro del menú de tu sitio: en la cabecera, en la página de contacto o cualquier otra zona visible dentro de un contenido. 

Incluso seguro que alguna vez has los has visto en movimiento. Todo esto se puede conseguir de manera muy sencilla, como veremos más adelante en este artículo.

Te voy a contar qué tipos de iconos gratis para WordPress existen, cuál es la función de cada uno de ellos y cómo añadirlos en este CMS en cualquier parte de tu web de una manera muy sencilla.

Sin embargo, antes de nada me gustaría que repasemos juntos su definición.

¿Qué son y para qué sirven los iconos en WordPress?

Los iconos para WordPress son imágenes pequeñas, sencillas y llamativas, que tanto nos gustan a todos los que trabajamos en Internet.

Sirven para hacer tu web sitio más visual y más práctico. Siempre han existido y dan un toque de diseño distinto y pueden incluso dar un respiro en la lectura, haciéndolo más usable y escaneable para el lector.

Es muy probable que tras ver uno gracioso, continúes leyendo un contenido que, a priori, está basado en un texto largo y de una temática aburrida. Es una técnica que funciona en la mayoría de los casos.

Los iconos para WordPress no sólo sirven como parte de una estrategia para crear una web de éxito y complemento al diseño web, sino que también son útiles para compartir artículos o acceder a tus perfiles sociales.

Debes pensar en tu web como un conjunto de elementos relacionados. Es muy probable que, en algún momento, necesites alguno de ellos para que la web funcione, atraiga, fidelice y te ayude a vender tus productos o servicios.

¿Qué tipos de iconos para WordPress existen?

Pese a que más adelante te contaré más acerca de ello con imágenes explicativas, en el siguiente vídeo puedes ver cómo insertar los diferentes tipos de iconos en tu web de WordPress:

Existen muchos tipos de iconos para WordPress, entre los que cabe destacar los siguientes: 

• Iconos de Fontawesome

La web de Fontawesome está repleta de ellos, en formato html. Esta página es una fuente interminable de pequeñas imágenes que podrás utilizar de manera gratuita en tu sitio web.

Puedes conseguir los que más te gusten, en el tamaño que quieras e insertarlos en cualquier sitio de tu web.

• Iconos para compartir en redes sociales

Las redes sociales son un factor determinante en la difusión de tu contenido.

Cuando publicas un artículo, tienes que dar facilidades al lector para que comparta tus artículos en todas las redes sociales posibles. Para ello, es primordial que insertes emoticonos de este tipo para facilitar que realicen esta acción.

• Iconos con acceso a perfiles sociales

El acceso a los perfiles sociales es otro de los factores que no deben faltar en tu sitio web, ya que el hecho de colocar iconos en la cabecera de WordPress, o incluso en el menú, dan siempre un factor visual extra.

Utilizándolos, tendrás un acceso rápido a las cuentas de tus perfiles sociales en Facebook, Twitter, Whatsapp y Google Plus, entre otros.

Debes elegir varios sitios donde insertar estos iconos personalizados en WordPress y dar así facilidades al lector, para que pueda contactar contigo en el momento en que lo desee.

Es cierto que, sobre todo cuando comienzas con tu web, estos elementos pueden ser un punto de fuga en algunos sectores. Pese a esto, siempre son un índice y canal importante de relación con el usuario que te visita.

• Emoticonos

Estas simpáticas imágenes no pasan nunca de moda y son unas figuras que se siguen usando en los textos, artículos y comentarios. Empatizan con el usuario y generan una pausa en la lectura.

Incluirlos en tus textos es muy fácil con un simple ajuste en tu WordPress, como ahora verás.

¿Cómo añadir iconos en tu web de WordPress?

Voy a explicarte varias formas de colocar iconos para WordPress en tu sitio web de manera muy fácil:

Insertar iconos en WordPress usando Fontawesome

Como ya te he comentado anteriormente, Fontawesome te facilita estas pequeñas imágenes y podrás descargarlos de forma gratuita.

Para disfrutar de ellos, sólo tienes que descargar uno de los plugins para iconos en el repositor de WordPress: "Font awesome 4 menus" o "Better Font Awesome".

Existen plantillas como Generate Press, que ya traen incluido las funciones de Fontawesome, con lo cual no necesitas instalar el plugin. 

Contacta con tu proveedor de plantillas o prueba a insertar los iconos y si ves que no aparecen reflejados en tu página, instala el plugin.

¿Cómo añadir Iconos gratis en el menú de WordPress usando Fontawesome?

Para elegirlos, sólo tienes que acceder a la página de Fontawesome y hacer clic en icons. Escoge entre el enorme pack de iconos el que te guste o selecciona en el buscador el que necesites.

Una vez seleccionado, copia y pega la “iclass”. Esta será la que necesites, para añadirla en tu web y que aparezca dicha imagen.

Puedes añadir este código, por ejemplo, dentro de cada apartado del menú. Para ello, una vez tengas creados tus menús, podrás insertar delante del nombre (etiqueta de navegación), el código generado en fontawesome.

Delante de cada apartado del menú que elijas, aparecerá el icono seleccionado (Ejemplo: el de la casa para la página de home).

¿Cómo incluir iconos de perfiles sociales con Fontawesome?

Implementar tus iconos sociales en WordPress es muy sencillo. Con Fontawesome también podrás usar los de las redes sociales dentro del menú, para que quien quiera, pueda acceder a tus perfiles sociales.

Esta opción es especialmente útil si no quieres usar ningún plugin espefico para ello, puesto que Fontawesome incluye iconos sencillos e igualmente válidos que los que te proporcionaría un plugin destinado a ello.

Del mismo modo, si tienes ciertos conocimientos en CSS, puedes darle un efecto hover, con el que queden algo más originales.

Usarlos es muy fácil: accede a "personalizar menús" y en la opción "enlaces" personalizados, incluye la “url” de tu perfil social e incluye en “texto de enlace” el código del icono facilitado por Fontawesome.

Añade este campo al menú y ya tendrás un pequeño elemento de acceso a tu red social.

Adapta tus iconos en cualquier parte de la web

Si lo que necesitas es incluir iconos en otro sitio que no es el menú, perfectamente puedes hacerlo. Tan sólo necesitas un campo HTML.

Imagina, por ejemplo, que quieres incluir delante del apartado de contacto uno pequeño con forma de teléfono. Hacer esto es muy sencillo, ya que te permite también incluir códigos de iconos para WordPress.

Si cuentas con un editor visual como Elementor Page Builder, es muy fácil, ya que tienes las opciones de cajas html y puedes adaptar el código awesome donde quieras; si lo que quieres es adaptarlo a las entradas del blog, simplemente se trata de incluirlo en la opción de html.

Igualmente puedes editar un widget de texto o html e incluirlo ahí.

Ejemplo: si lo que quieres es añadir el icono del teléfono, sería de la siguiente manera:

<i class="fa fa-phone" aria-hidden="true"></i> (+34) 699 999 999

¿Cómo puedo insertar iconos en movimiento?

Por si todas estas posibilidades no hubieran sido pocas, también puedes ponerlos en movimiento añadiendo una simple línea de código.

Si quieres por ejemplo hacer que ese teléfono, además dé vueltas, lo único que tienes que hacer es añadir detrás de cada “código fa” el siguiente código:

• Quedará así añadiendo la opción fa-spin:

<i class="fa fa-id-phone fa-spin"></i>

• Si lo que quieres es que además el emoticono sea más grande, añade fa-3x, fa 4x etc., dependiendo del tamaño que quieras:

<i class="fa fa-id-phone fa-spin fa-3x fa-fw"></i>

Puedes adaptar esta opción con el que tú decidas. Tienes más ejemplos y opciones en la web, pudiendo añadir “fa pulse”, por ejemplo haciendo otro tipo de rotaciones etc.

Como ves, Fontawesome es sencillo y muy interesante.

Plugins para poner iconos en WordPress y compartir en redes sociales

Usar iconos para compartir tu contenido es fundamental y debes asegurarte que tu web ofrezca este acceso fácilmente.

A mí mismo me ha ocurrido el no haber podido compartir un contenido interesante, al no disponer la web de esta opción o estar algo escondida. Por tanto, mi recomendación es que hagas que los iconos de compartir en redes sociales estén visibles siempre.

Normalmente, los plugins destinados a cumplir estas tareas son muy sencillos de configurar, ya que una vez escoges las redes sociales para compartir tu contenido, aparecerá al final de cada post en tu blog, dando la opción al usuario a compartir tus posts.

Plugins tipo freemium

Para compartir tus artículos, puedes usar plugins con una parte gratuita (lo que habitualmente se denomina "freemium"), como:

• Social Share WordPress Plugin: sencillo a la vez que atractivo plugin, que te proporciona los iconos de compartición social más importantes.
• AddToAny Share Buttons: inserta tantos como necesites. Buen plugin, sin duda para compartir tus contenidos.
• Ultimate social media icons: plugin de iconos sociales gratuitos y con muchas posibilidades, con opciones de barras flotantes o "pop ups". Consume menos recursos que los anteriores.
• Social Warfare: Plugin de pago(versión gratuita limitada) muy visual, con diseños muy atractivos y multiples posibilidades como usar todos los iconos para redes, barras flotantes (incluye el plugin clic to tweet para compartir en twitter)
• Elementor page builder: se trata de un maquetador visual, que si tienes la suerte de contar con la versión pro, puedes prescindir de un plugin de redes sociales, ya que estará integrado en él.

Con "Elementor Pro" puedes personalizarlos a tu gusto, incluso con colores, formas o efectos, consiguiendo los colores corporativos exactos de tu web.

La forma de integrarlos en las distintas partes de la web es muy sencilla, ya que puedes incluir estos iconos mediante una opción del propio maquetador o bien usar un shortcode con el que podrás insertarlo al final de cada post, en el sitio que quieras, simplemente cortando y pegando el código.

Es posible adaptarlo automáticamente para todas las páginas que quieras, usando el editor o "hooks" de wordPress. Esto, aunque no es difícil, con la opción anterior lo tendrás más fácil.

Plugin gratuito

Para insertar perfiles sociales tienes a tu disposición plugins gratuitos como:

• Lightweight social icons: con este plugin podrás agregarlos dentro de la cabecera de tu web, o en cualquier widgets del sidebar, etc. Se trata de un plugin muy personalizable y con posibilidad de usar colores propios, definir tamaños, bordes, redondeados etc.

Para implementarlo, es tan sencillo como insertar los iconos en los widgets de cabecera, por ejemplo.

De la misma manera que el plugin anterior, esto te permite evitar un plugin, utilizando todas las opciones de maquetación que da Elementor. Utiliza las opciones del shortcode y permite que accedan a tus cuentas sociales.

¿Cómo puedo añadir emoticonos en mis entradas o artículos?

Si lo que quieres es usar las famosas caritas amarillas que normalmente usas en Whatsapp, puedes descargar los emoticonos gratis e incluirlos en tus textos. Sin embargo, hay una manera mucho más fácil de hacerlo.

WordPress, por defecto en "Ajustes", permite que insertes estos emoticonos dentro de tus textos, simplemente marcando la casilla de "Ajustes > Escritura > Formato" y podremos usar combinaciones de : , ó ; generando distintos emoticones, iguales a los que ya usas en tu app de mensajería.

Podrás incluirlos dentro de tus artíulos o comentarios, jugando así con los signos, para enfatizar una frase o representar gráficamente el contenido.

Conclusión

Como has podido ver, es muy fácil insertar iconos en WordPress. Cuentas con tantas opciones, que ahora tú debes decidir cuál usar.

Puedes personalizarlos, sobre todo si usas un buen maquetador que incluya guardar plantillas. Igualmente, puedes utilizar plugins para incluir tus iconos sociales en WordPress de manera muy sencilla.

Si optas por incluirlos en tu sitio web, mi consejo es que uses Fontawesome.

Elige entre los miles de iconos gratuitos que ofrece.

Si eres de los que te gustan las caritas (emoticones), usa los signos de puntuación, escribiéndolos directamente desde tu teclado.

Y tu, ¿qué forma de agregar iconos en WordPress utilizas actualmente? ¿Qué plugins de redes sociales usas en tu sitio? :)