Todo lo que tienes que saber sobre los iconos en WordPress

Los iconos son un recurso que puede hacer tu sitio web WordPress mucho más amigable para los usuarios. Es por eso que hoy aprenderás todo lo que necesitas saber sobre ellos: qué son, de qué forma puedes implementarlos en tu página web, cómo darles uso en redes sociales y muchos más conceptos.

El concepto es fácil: un icono es un elemento gráfico que, por lo general, se utiliza para enlazar de una forma mucho más gráfica hacia otra página. Los conocerás de haberlos visto en forma de botones para compartir un contenido en redes sociales, pero tienen muchos más usos. Además, con las herramientas que te enseñaremos más adelante podrás crear tus propios iconos desde cero.

Si tienes un blog o página web construido sobre WordPress, te interesa lo que te vamos a contar a continuación. Empecemos por explicar a qué nos referimos por “iconos WordPress” cuando hacemos referencia a ellos.

Qué entendemos por iconos en WordPress

Desde el estricto sentido de la palabra, un icono es un símbolo que representa un objeto o idea con el cuál guarda una estrecha semejanza. En el caso particular de nuestro tema, los iconos son aquellos símbolos visuales que resaltan el contenido de un modo visual, o nos direccionan a otras secciones de nuestra página web, o a otras plataformas asociadas como tiendas virtuales o redes sociales. En resumen, son una forma más visual de invitar al usuario a que realice alguna acción.

Los beneficios de usar iconos en lugar de enlaces son muy variados, y entre los más importantes encontramos que hacen tu página web más funcional, fácil de comprender y mucho más amigable con los usuarios.

7 ventajas de utilizar iconos en tu blog

1. Conseguirás llamar más la atención del usuario para que se de cuenta del enlace.
2. Darás a tu blog un aspecto mucho más profesional.
3. Si el icono es representativo del contenido o página web hacia la que apunta, conseguirás transmitir de un vistazo lo que el usuario se encontrará si pulsa sobre él.
4. Si te atreves a crear tus propios iconos desde cero, podrás diseñarlos a tu gusto para que encaje en el diseño de tu blog.
5. Los puedes poner en cualquier parte de tu web.
6. En WordPress es muy fácil instalarlos.
7. Hoy en día, todo entra por los ojos: si tienes una web con unos iconos cuidados, es más probable que guste a los usuarios que entren por primera vez en ella.

Hoy en día, el usuario medio ya se ha vuelto ciego ante los enlaces planos de texto: es difícil conseguir que haga clic en ellos porque seguramente ni los distingue del resto del texto a primera vista. En cambio, un icono es un elemento mucho más visual, y si lo eliges correctamente conseguirás que todos los que visiten tu página web se den cuenta de su presencia y sientan interés por pulsarlo.

En resumen, no podemos perder de vista que todo entra por los ojos, y el efecto visual de los iconos hace que tu sitio sea mucho más atractivo estéticamente hablando.

Dónde descargar iconos para mi blog en WordPress

Ahora que ya lo tienes claro, te estarás preguntando: ¿por dónde empiezo? Lo primero es descargar paquetes de iconos para ver si alguno de ellos encaja en lo que estás buscando, ya que de esta forma te ahorrarás diseñar el tuyo desde cero —en cualquier caso, más adelante te diremos cómo hacerlo—.

A continuación tienes algunas de las páginas de fuentes de iconos para WordPress más populares. Puedes explorar las opciones que tienen y elegir la más adecuada para tu página web.

1. Font Awesome

Font Awesome es una de las fuentes de iconos más populares de toda la red. Es súper sencilla de usar y se podría decir que puedes descargar diseños ilimitados para darle una nueva vida a la imagen de tu blog. En esta página puedes elegir entre la opción gratuita o la opción premium que te ofrece más funcionalidades. No obstante, la versión free, para ser gratuita, funciona bastante bien.

2. Icomoon

Icomoon es otra de las fuentes que definitivamente tienes que conocer. Aquí podrás descargar todo tipo de iconos e incluso desde la versión premium puedes personalizar algunos para que sean exclusivos de tu sitio web. La única desventaja es que es un poco complicado de usar.

3. Elegant Themes

Elegant Themes es una página web que no solo funciona como fuente de temas para WordPress, sino que además puedes buscar diferentes opciones para elegir los iconos de tu sitio web. Los que encuentras aquí son ideales para usarse en la platilla Divi. Así que, si Divi es tu plantilla de cabecera, esta fuente de iconos gratis te encantará.

Cómo funciona Font Awesome, una de las mejores fuentes de iconos para tu blog

Después de mostrarte algunas de las mejores fuentes para insertar iconos en WordPress, te enseñaremos cómo agregar Font Awesome como tu herramienta en tu blog. La razón es sencilla, Font Awesome no solo es nuestra fuente favorita gracias a sus funcionalidades, sino que además es muy sencilla de usar y por eso la recomendamos totalmente.

Para añadir Font Awesome a WordPress tienes dos opciones: hacerlo manualmente, o hacerlo mediante un plugin. Es preciso decir que este es uno de los plugins más populares de WordPress, sin embargo, si no quieres recargar tu sitio con plugins, que sepas que hacerlo manualmente es súper sencillo.

¡ADVERTENCIA! Para empezar, es preciso que tengas en cuenta que antes de añadir cualquier tipo de código a tu archivo de funciones (functions.php) debes realizar una copia de seguridad. Esto es necesario porque en caso de presentarse algún tipo de error en el proceso, esto podría dañar tu sitio web. Lo decimos porque en uno de los pasos será necesario que edites este archivo, así que tenlo en cuenta.

1. Así se inserta un icono si usas Font Awesome

Si sigues estos pasos al pie de la letra, podrás disfrutar de Font Awesome en cuestión de segundos. Para habilitar la opción de los iconos en tu blog a través de Font Awesome, sigue estos pasos:

Nos situamos en el panel de administrador de WordPress y elegimos “Apariencia”.

Elegimos la opción de “Editor” y una vez ahí , buscamos en el explorador de archivos la opción que se denomina “Funciones del tema” o “functions.php.”.

En este archivo vamos a copiar el siguiente código:

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
wp_enqueue_style( 'load-fa', 'https://use.fontawesome.com/releases/v5.3.1/css/all.css' );
}

Elegimos la opción “Guardar” ¡Y listo! Así de fácil podemos disfrutar los beneficios de Fond Awesome en WordPress sin necesidad de descargar un plugin.

El siguiente paso para empezar a incluir los iconos en una entrada de WordPress es añadirlos mediante códigos HTML.

Lo único que debes hacer es visitar la Galería Completa de Iconos de Fontawesome.

Allí encontrarás todas las opciones de iconos que necesitas. Ahora debes señalar el icono de tu preferencia y copiar el código html que lo acompaña.

Luego pegas este código en tu editor en la pestaña HTML de WordPress ¡Y listo!

2. Si lo prefieres, puedes automatizar su funcionamiento a través de un plugin

Pero luego está la segunda opción. Usar la fuente de iconos Font Awesome para WordPress mediante un plugin es un proceso sencillo y te ofrece múltiples funcionalidades. Para hacerlo, debes:

Instalar y activar el plugin Better Font Awesome.

Luego debes ir a la sección de “Ajustes” y da click en la opción “Better Font Awesone” para terminar de configurar el plugin. No obstante, es preciso resaltar que el plugin funciona out of the box, y esto hace que en la mayoría de los casos no tengas que cambiar nada.

Con esta opción podrás añadir los iconos usando shortcodes. Como hacemos nosotros en este blog, por ejemplo:

Además puedes añadir iconos en el editor para cada post. Para esto, el plugin habilita un nuevo botón que se denomina “Insertar icono” o “Insert Icon” aquí podrás buscar los iconos que deseas insertar en el contenido. Un dato importante es que todas las búsquedas deben de ser en inglés.

Después de hacer tu búsqueda, verás que el icono que elijas te dará un shortcode que será el que utilices dentro de tu post.

Más plugins para tener iconos en WordPress

Después de enseñarte cómo usar el plugin de Font Awesome en WordPress, es preciso que sepas que aunque este es mi recomendado, y además es el más popular de la red, también hay otras opciones de plugins iconos para WordPress que te darán elementos para que personalices tu blog. Los más recomendados son:

1. Menu Icons

Menu Icons de Themelsle es un plugin gratuito muy sencillo de usar y tiene como ventaja que funciona muy bien con la mayoría de los themes de WordPress, además de que su galería es compatible con otras fuentes de iconos como Font Awesome.

2. WP Menu Icons

En WP Menu Icons puedes encontrar una fuente gratuita diseñada para tener total compatibilidad con Font Awesome. Lo mejor es que es un plugin que cualquier editor soporta muy bien, y por eso no sobrecargará tu página web. Con este plugin puedes elegir iconos clásicos y, a partir de su diseño base, cambiar su aspecto a tu gusto.

3. WoW Icons

En WoW Icons puedes encontrar más de 2500 iconos que puedes utilizar en tus post, páginas o menús. Esto hará de tu sitio web un lugar mucho más atractivo visualmente y con un diseño más responsivo.

Estos son solo algunos de los plugins iconos WordPress más destacados, y además, como ya te habrás dado cuenta, todos se compaginan perfectamente con Font Awesome.

En esta pequeña lista que te dejamos a continuación puedes encontrar algunos de los mejores plugins para iconos de redes sociales. Estos plugins te permitirán añadir botones de Twitter, Facebook o WhatsApp —entre muchos otros— a tu blog para que cualquiera pueda compartir los contenidos con sus amigos.

1. Social Media Share Buttons & Social Sharing Icons

Social Media Share Buttons & Social Sharing Icons es un plugin gratuito que te permite agregar iconos de RSS, en los que puedes encontrar Facebook, Twitter, Instagram, LinkedIn y otras más de 200 Redes Sociales. Si eliges este plugin, puedes obtener muchas más funcionalidades como activar la opción de “Me gusta” para que las personas puedan seguirte en tus redes sociales sin necesidad de salir de tu blog o insertar los iconos en formato de animaciones.

2. Social Icons Widget

El plugin Social Icons Widget de WPZOOM es una herramienta que puedes usar para agregar diseños con enlaces a tus diferentes redes sociales. Además incluye diversos paquetes que te sirven para enlazar a otras funcionalidades de tu sitio web. Este plugin cuenta con integración a FontAwesome y puedes buscar tus íconos por palabras clave o categorías.

3. Easy Social Icons

El plugin de Easy Social Icons te permite cargar los iconos de tus redes sociales y configurarlos a tu antojo. Funciona de un modo similar al de FontAwesome, lo que significa que se insertan por medio de shortcodes. Si deseas instalarlo, debes saber que funciona perfectamente con sitios web responsive y como bonus, gracias a la integración con Google, se verán los iconos de tus redes sociales en el buscador.

4. Lightweight Social Icons

Lightweight Social Icons es un plugin súper sencillo de usar, diseñado para mostrar los iconos de tus redes sociales favoritas. El plus de este plugin es que permite personalizar el diseño, y es por eso que te permite cambiar tamaños, colores y fondos para adaptarlos a tus necesidades particulares. Twitter, Facebook o Instagram son solamente algunas de las redes sociales incluidas en este pack.

Conclusiones

Como ves, tienes múltiples formas de activar las funciones los iconos en tu blog en WordPress. Ahora queda en tus manos la decisión de empezar a usar la opción que creas más conveniente para tu página. En cualquier caso, se trata de un proceso que te llevará poco tiempo y, a su vez, repercutirá muy positivamente en el aspecto de tu blog.

Si te gustó el artículo, no dudes en compartirlo con ese amigo que también tiene una página web. Además si tienes alguna pregunta o aclaración, tenemos disponible nuestra caja de comentarios para que construyamos el conocimiento entre todos.