Iconos para WordPress: Qué son y cómo utilizarlos

Usar iconos en WordPress es una forma estupenda de transmitir ideas o conceptos más o menos complejos mediante elementos visuales. El usuario los puede interpretar de una forma mucho más ágil que el texto escrito.

De hecho los iconos se han convertido en casi un estándar. Por ejemplo: sabes que un botón con forma de casa te lleva al inicio de la web, que otro con un sobre enviará un mail o que el icono con el logo de Facebook te permitirá compartir una publicación.

Las páginas web que incorporan iconos son identificadas como más frescas y con un diseño más atractivo. Bien usados, los iconos pueden significar además un buen aporte para la usabilidad o la accesibilidad de tu sitio web con WordPress y mejorar la experiencia de usuario de tus visitantes.

Qué son los iconos en WordPress y para qué se utilizan

Los iconos son pictogramas que representan una idea. Se hicieron muy populares con el desarrollo de los entornos gráficos en el mundo de la informática, donde los utilizamos habitualmente para representar unidades de almacenamiento, papeleras de reciclaje o carpetas, por ejemplo.

No tienes más que echar un vistazo al escritorio de tu ordenador o a la pantalla de tu smartphone para entender perfectamente de qué te hablo exactamente.

En WordPress, los iconos suelen utilizarse en los menús como un elemento de navegación, en textos para ilustrar gráficamente un estado de ánimo o como botones para realizar tareas, como es el caso de los botones sociales.

WordPress trae por defecto una fuente de iconos instalada que se usa fundamentalmente para los iconos del escritorio. Son los Dashicons. También incluye unos cuantos emoticonos básicos, pero es probable que ambos se te queden muy cortos para tus proyectos.



Así que si deseas gozar de un poco más de libertad en cuanto a la gama de opciones de iconos para WordPress, sigue estos métodos divididos por su funcionalidad.

Tipos de iconos para WordPress

El uso más destacado que puedes hacer de iconos en WordPress es el de crear con ellos botones de navegación para tus menús o llamadas a la acción.

Para estos casos lo ideal es contar con algún tipo de icono que te permita trabajar sin pérdidas de calidad a diferentes tamaños. Por ello, a priori deberías descartar las imágenes y usar en su lugar fuentes de iconos para WordPress (como Fontawesome, por ejemplo).

Fuentes de iconos: Font Awesome para WordPress

Font Awesome es un framework de más de 1.500 iconos vectoriales que te permite trabajar con ellos como si fueran fuentes. Al no usar imágenes para mostrar los iconos, Font Awesome representa una gran ventaja en términos de velocidad de tu web.

Estas ventajas las comparte con otras fuentes de iconos que encontrarás por la red y de las que hablaré un poco más adelante en este mismo post.

Como se trata de imágenes vectoriales, los iconos se escalan a cualquier tamaño sin pérdida de calidad. Esta es una característica decisiva para el diseño responsive y es perfecta para tenerla en cuenta con el uso de pantallas de tipo Retina.

Al igual que otros textos web, puedes manipular fácilmente las fuentes de iconos a través de CSS. Por ejemplo, puedes cambiar su tamaño y colores, agregar sombras, rotarlos y mucho más.



Otro aspecto interesante es que permiten almacenar muchos iconos dentro de un solo archivo. Esto reduce las solicitudes HTTP en comparación con las necesarias para la carga de varias imágenes.

Las fuentes de los iconos no aumentan significativamente el peso de la página, particularmente si usas una biblioteca solo con los iconos que necesitas.

Un poco más adelante, en este mismo post, te explico cómo incorporar esta fuente (y otras) en tu WordPress para usar sus iconos a tu antojo.

Iconos de redes sociales en WordPress

Los iconos de redes sociales para WordPress tienen fundamentalmente dos objetivos distintos:

1. Iconos para enlazar con las redes sociales de la página web. Sirven para que tus visitantes puedan localizar cómodamente los perfiles sociales vinculados a tu marca y propiciar que te sigan.


2. Iconos para compartir en redes sociales. Estos iconos facilitan al usuario la acción de compartir el contenido de tu web que está consumiendo en ese momento en las redes sociales más populares o que más nos interesen en nuestra estrategia de marketing.

Como ves, se trata de dos funciones bien distintas (aunque estén relacionadas) y que no debemos confundir. En el primer caso, se trata tan solo de enlaces. En el segundo, incluyen una cierta funcionalidad al conectarse con la API de las redes sociales con las que trabajan para realizar una publicación remota.

En Raiola ya dispones de un completo artículo donde se repasan algunos de los mejores plugins de WordPress de iconos para compartir en redes sociales.

Si solo buscas una colección de iconos para aplicarla manualmente, Socicon dispone de 258 iconos de todas las redes sociales que te puedas imaginar listos para usarse.



Otra fuente de iconos de redes sociales muy interesante es Socialicious, que los ofrece con sus colores corporativos de partida e incluso con la posibilidad de construir botones sociales muy resultones.



Y para acabar con los iconos sociales para WordPress, una última librería en formato fuente: Mono Social Icons Font. Incluye más de 100 iconos en 3 versiones disponibles: sin fondo, sobre un círculo o sobre un cuadrado.

Con un estilo sencillo, elegante y muy ligero, esta fuente está publicada bajo una licencia abierta (Open Font License) gratuita para proyectos tanto personales como comerciales.

Emoticonos en WordPress

El uso de emoticonos en la comunicación escrita es cada vez más habitual y WordPress no es ajeno a ello. Del mismo modo que acostumbras a poner caritas sonrientes en WhatsApp o en Twitter, también puedes usar los emoticonos en WordPress.

Estos emoticonos sirven para expresar estados de ánimo, fundamentalmente, aunque en los últimos años su uso creativo se ha multiplicado exponencialmente.

Desde hace algunas versiones, WordPress trae activada por defecto la función de convertir cadenas de texto determinadas en un emoticono o smiley. En esta tabla puedes ver los 22 emoticonos para WordPress disponibles de serie:



Si al escribir dichas combinaciones de caracteres en tu editor de texto, estas no se convierten automáticamente en el icono, lo más probable es que tengas desactivada esta funcionalidad. Para corregirlo. accede a tu Escritorio de WordPress > Ajustes > Escritura y activa la casilla que lo habilita.



Como puedes ver, 22 emoticonos no parecen suficientes. No te preocupes, porque también puedes usar los tan de moda emojis en WordPress.

Los emojis son caracteres y secuencias Unicode que son compatibles con la mayoría de dispositivos y aplicaciones. Aunque son muy parecidos a los emoticonos que acabamos de ver, no debes confundirlos pues estos últimos son mucho más modernos y variados.



Usar los emojis en WordPress es tan sencillo como activarlos en el teclado del dispositivo que estés usando, bien sea un smartphone o tablet, bien sea en el escritorio.

• En Windows 10 simplemente pulsa la tecla Windows y la tecla “punto” (Win + .) y esto desplegará un teclado virtual con todos los emojis disponibles.


• En Mac OS X pulsa Control+⌘+Espacio y tendrás tu mapa de emojis disponible.


• En GNU/Linux depende de cada distribución pero si usas Ubuntu en este post han empaquetado una aplicación para que puedas usar los emojis en Linux fácilmente.

Si lo prefieres también puedes copiarlos directamente de la web de Unicode y pegarlos en el documento de trabajo.

Aunque podrás ver en el repositorio oficial que existen un buen puñado de plugins para integrar los emojis en WordPress. Lo cierto es que ninguno funciona correctamente desde la integración de Gutenberg como editor principal de WordPress, por lo que no te recomiendo usarlos.

Ya desde antes del cambio de editor de la versión 5.0 no se actualizaban con demasiada frecuencia así que ahora solo van a provocarte dolores de cabeza si pretendes usarlos con el editor de bloques. Al menos esta es la situación a día de hoy con Gutenberg tan reciente.

Piensa que cuantos más plugins puedas ahorrarte, mejor. Teniendo ya un mapa de emojis en tu teclado, ¿para qué sobrecargar tu web con otro plugin más?

Cómo añadir iconos en WordPress a mano

Añadir los iconos a WordPress a mano no puede ser más sencillo. Al tratarse de fuentes, el sistema es similar para casi cualquier biblioteca de iconos. Te muestro a continuación cómo hacerlo con Font Awesome que, a fin de cuentas, es una de las más utilizadas en WordPress.

Para añadir la fuente de iconos de Font Awesome puedes seguir las instrucciones de la web e integrar en el <head> de las plantillas de tu tema (vía header.php) el siguiente código para la versión actual:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Con eso estaría todo listo para funcionar, pero no es la opción más adecuada.

Lo mejor es añadir una función en el functions.php de tu tema hijo. Para ello, sigue los siguientes pasos:

1. Añade al functions.php de tu tema hijo la URL de la fuente con el siguiente código:

function pm_add_font_awesome() {

 	wp_enqueue_style( 'pm-font-awesome', 'https://use.fontawesome.com/releases/v5.7.2/css/all.css' );

} 

add_action( 'wp_enqueue_scripts', 'pm_add_font_awesome' );

Esto es válido para la versión 5.7.2. Te recomiendo que lo verifiques en la propia web de Font Awesome para usar siempre la última versión.

Como he matizado, lo aconsejable es que lo hagas en un tema hijo para que no lo pierdas en las sucesivas actualizaciones de tu tema y crees por tanto un nuevo functions.php.

2. Escoge los iconos que desees utilizar de la galería de iconos de la versión free de Font Awesome. Fíjate en que cada icono tiene su propia clase de CSS para poder identificarlo.

3. Inserta en modo HTML el código de cada icono con esta estructura:

• <i class="fas fa-home"></i> para el icono de home.


• <i class="fas fa-phone"></i> para el de teléfono.


• <i class="fab fa-facebook"></i> para el de Facebook, por ejemplo.

4. Recuerda que al tratarse de fuentes puedes aplicarle estilos como tal, por ejemplo, podrías tener un icono de home de color rojo con un tamaño de 50px usando el siguiente código:

<span style="font-size: 50px; color: red;">



 <i class="fas fa-home"></i>



</span>

A partir de aquí puedes echarle toda la imaginación que quieras. Por ejemplo, podrías usar estos códigos en:

• Los widgets de tipo HTML.


• Cualquier post o entrada usando un bloque de código o uno de HTML personalizado.


• Los menús de WordPress

El último caso es quizás el más particular.

Para poder añadir un icono al menú de WordPress deberás utilizar el código del icono elegido en lugar de la etiqueta de navegación en la configuración del menú, tal y como puedes ver en la siguiente imagen. Para ello, he usado la opción de enlaces personalizados:





De esta forma, conseguirás el siguiente icono de home en tu menú:

Plugins para añadir iconos en WordPress

Menu icons by ThemeIsle

Menu icons es uno de los plugins de iconos para WordPress más interesantes que puedes encontrar para añadir iconos a los menús. Primero, porque lo hace de una forma realmente sencilla. Segundo, porque incorpora una extensa biblioteca de iconos compuesta por los Dashicons, Elusive Icons, Font Awesome, Foundation Icons, Genericons, Fontello y TI Icons. Además, te permite escoger imágenes y SVGs de tu biblioteca de medios.

Una vez instalado y activado, el editor de menús de tu Escritorio de WordPress sufrirá algunos cambios. Para empezar, te permitirá seleccionar las librerías de iconos activas:



En segundo lugar, todas las opciones añadidas al menú incorporarán un nuevo campo donde puedes asignar cualquier icono:



Al escogerlo, puedes definir propiedades del icono. Por ejemplo, si quieres que se vea la etiqueta de navegación (el texto en el menú), la posición, alineación o tamaño del icono:



Una vez guardado el menú, podrás disfrutar de un estupendo menú con iconos en WordPress.

Si deseas verlo en acción, puedes comprobar lo sencillo de todo el proceso en este vídeotutorial:

https://www.youtube.com/watch?v=Qo-XVZnasJQ&feature=youtu.be

Si estás trabajando con menús complejos y necesitas un desempeño espectacular, también puedes combinar esta funcionalidad de los iconos con el uso de Megamenús.

Better Font Awesome

Si lo que deseas es utilizar los iconos de Font Awesome en cualquier área de WordPress, una de las mejores opciones a tu disposición es usar Better Font Awesome. Este plugin añadirá esta fuente de iconos a tu tema y te dará la posibilidad de usarlos mediante cómodos shortcodes como este:

[icon name="home"]

También permite crear combinaciones más complejas como esta:

[icon name="home" class="2x spin border" unprefixed_class="my-custom-class"]

Lamentablemente, no se integra con el editor de bloques al nivel del editor de párrafos, pero puedes apoyarte en los bloques de tipo shortcode para usarlos.

Por otro lado, si todavía estás usando el editor clásico verás que integra un botón en TinyMCE para añadir un icono como un elemento más de tu composición.

Iconos para WordPress gratis: dónde encontrarlos

Existen muchas bibliotecas de iconos para WordPress además de la anteriormente mencionada Font Awesome o de la propia del sistema Dashicons. Algunas de las fuentes de iconos más destacadas son:

• Fontello, que te permitirá crear tu propia galería de iconos personalizada con distintas fuentes.


• Icomoon, con más de 5.000 iconos disponibles y una app propia para generar fuentes.


• Bytesize, un proyecto con iconos extra livianos.


• Genericons, creados por Automattic, la empresa que está detrás de WordPress.com.


• Elegant Icon Font, el paquete de 360 iconos ligeros creados por el equipo que desarrolló Divi.


• Foundation, 283 elegantes iconos

Sin embargo, recuerda que también puedes usar como iconos imágenes, PNGs o (mejor aún) SVGs. Para ello, puedes contar con servicios gratuitos como iconmonstr, con licencias que obligan a mencionar al autor como Flaticon o directamente de tipo premium como Iconfinder.

Conclusión

Usar fuentes de iconos para WordPress es una buena forma de obtener iconos de alta calidad con el mejor rendimiento posible para tu web. Como has podido leer, la gama de posibilidades de encontrar iconos atractivos es enorme. De hecho, es tanta que uno de los riesgos más probables es que acabes con un montón de fuentes de iconos instaladas en tu WordPress para usar solo unos pocos de cada familia.

Esto puede suponer un problema de rendimiento que afectaría a la velocidad de carga de tu sitio. Para compensar este problema, te sugiero dos cosas: usar uno de los mejores hosting para WordPress en España y crear tu propia biblioteca de iconos con alguna de las herramientas que has visto en el punto anterior.

La idea es incorporar exclusivamente aquellos iconos que vamos a usar y desechar el resto. De esta forma, podrás estar totalmente seguro de que estás sacando el máximo rendimiento al uso de tus iconos para WordPress.

Y tú, ¿usas iconos en tu web? ¿Cuáles son tus bibliotecas preferidas? Compártelas con el resto de lectores en los comentarios.