[WordPress] Cómo añadir iconos a las opciones del menú. Con y sin plugins.

Los iconos dan gran vistosidad a los elementos de una web. Sin ir más lejos, el propio menú adminstrador de WordPress está creado a base de iconos, y eso acelera la tarea de identificar las opciones, en lugar de tener que pararnos a leerlas.

Los iconos refuerzan el mensaje que queremos dar pues, a fin de cuentas, “una imagen vale más que mil palabras“, ¿no?

En este tutorial vamos a mostraros cómo añadirlos al menú superior. Pero lo vamos a hacer utilizando fuentes de iconos en lugar de imágenes de iconos. ¿Por qué? Porque de esa manera:

• Nuestros iconos serán vectoriales, no pixelándose nunca y adaptándose automáticamente a todo tipo de pantallas. También a las de retina.
• Se comportarán como una fuente, así que podremos cambiarlos de color y tamaño sólo con CSS.
• Pesan menos, mucho menos que una imagen normal.
• Y tienen fondo transparente, así que no tendremos  que preocuparnos por colocarlos sobre fondos en blanco.

¡Vamos allá!

Menu Icons by ThemeIsle

Plugin gratuíto que emplea su propia colección de iconos.

Su forma de actuar es muy sencilla. Cuando se está en el editor de menús, veremos una opción nueva llamada “Añadir Icono/Add Icon“. Al pulsar en ella se nos despliega la galería. Únicamente tendremos que escoger el deseado y ya está.

¿Pega? Su oferta de iconos disponible es muy escasa, y no se pueden agregar iconos de otras colecciones.

WP Menu Icons

Similar al anterior pero con la ventaja de que, ahora sí, podemos seleccionar iconos de entre las fuentes más populares:

• Elegant Icons
• Elusive Icons
• FontAwsome
• Icons Foundation
• Icons Themify Icons

Max Mega Menu

Uno de los plugins más completos. Sustituye el menú por defecto por otro 100% personalizable.

No sólo nos permite poner iconos, también nos deja poner imágenes, colores, fuentes, personalizar las columnas de los submenús…

Lo primero que tendremos que decidir será el tipo de fuente de iconos a usar.

Hay muchas alternativas, pero las más comunes, al menos que sepamos, son:

• fontello.com
• Font Awesome
• Fontastic
• Ico Moon

Si conoces alguna más que valga la pena incluir en la lista, ¡háznoslo saber en los comentarios!

La idea es entrar en esas webs y navegar en su galería de iconos para ver cuál nos agrada más. Tras ello debemos vincular la fuente a la instalación de WordPress. Lo podemos hacer siguiendo este otro tutorial que hicimos en su día.

Una vez vinculada la fuente, o las fuentes (¡sí sí, podéis usar varias!):

1. Nos fijamos, en la galería de iconos, en cuáles vamos a usar. Y anotamos su nombre. Nosotros vamos a hacer este ejemplo con Font Awesome:
   
2. Tras ello, en WordPress, vamos al editor del menú: Apariencia –> Menús
3. Y colocamos el código de llamamiento al icono:
   • Bien con el código completo:
     
   • Bien habilitamos el input de CSS (si no lo tenemos visible, buscamos la pestaña “Opciones de pantalla”, en la parte superior del administrador, y la activamos) y ponemos únicamente el nombre:
     
4. Hay que tener en cuenta que cada fuente de iconos tiene un modo diferente de llamarlos:
   • Fontello: <i class=”CLASSNAME”></i>
   • Font Awesome: <i class=”fas fa-igloo”></i>
   • Ico Moon: <span class=”icon-home”></span>
5. Tras ello guardamos, ¡y listo!

Y si tienes dudas, recuerda que en los comentarios podemos ayudarte.