---
title: "Añadir iconos a los menús en WordPress"
description: "Añadir iconos a los menús en WordPress es algo relativamente fácil de hacer, en esta entrada te mostraremos cómo hacerlo a través de un plugin gratuito."
url: https://webpamplona.com/anadir-iconos-a-los-menus-en-wordpress/
date: 2014-12-31
modified: 2016-03-29
author: "Expertos en WordPress en Pamplona"
image: https://webpamplona.com/wp-content/uploads/2014/05/wordpress-logo.jpg
categories: ["Plugins WordPress", "WordPress"]
type: post
lang: es
---

# Añadir iconos a los menús en WordPress

**Añadir iconos a los menús en WordPress** es algo relativamente fácil de hacer, en esta entrada te mostraremos cómo hacerlo a través de un plugin gratuito.

---

## Plugin: Font Awesome

!(https://lh5.googleusercontent.com/-iWll0WiRB3U/UtGPRR6uaoI/AAAAAAAAAIE/zsXSSkZZBJM/s800/font-awesome-4-menus.png)

Utilizaremos el plugin gratuito “**Font Awesome 4 Menus**“, originalmente diseñado para Twitter Bootstrap, “(http://fortawesome.github.io/Font-Awesome/)” nos proveerá de 369 iconos vectoriales que son completamente personalizables vía CSS (*ideal para los usuario más experimentados*), los iconos no utilizan JavaScript y son perfectos para pantallas retina.

---

### » Paso 1: Instalar y activar Font Awesome

Descarga el plugin “**Font Awesome 4 Menus**” desde el repositorio oficial de plugins, o búscalo en la página “**Instalar plugins**“:

!(https://lh5.googleusercontent.com/-13LIcNVIgmk/UtGPQxSImHI/AAAAAAAAAIA/4nB0k7GNoq4/s800/anadir-iconos-a-los-menus-en-wordpress.png)

Una vez instalado y activado, “**Font Awesome 4 Menus**” es completamente funcional en tu sitio web y no requiere configuraciones adicionales.

### » Paso 2: Activar clases CSS

Ahora es momento de activar un ajuste de las propiedades avanzadas de menú. Desde el menú lateral izquierdo ve a la sección “**Apariencia**” > “**Menús**“:

!(https://lh4.googleusercontent.com/-dZ6N0DErRwg/UtGPQK32FTI/AAAAAAAAAHc/Wz03NWqLSbs/s800/anadir-iconos-a-los-menus-en-wordpress-1.png)

En la página “**Menús**” haz clic sobre la pestaña superior izquierda “**Opciones de pantalla**“. En el apartado “**Mostrar propiedades avanzadas de menú**” asegúrate de activar la casilla de verificación “**Clases CSS**“:

!(https://lh4.googleusercontent.com/-B_AGFww_lY4/UtGPQE_CwMI/AAAAAAAAAHg/zvaMeADVx4g/s800/anadir-iconos-a-los-menus-en-wordpress-2.png)

### » Paso 3: Personalizar el menú de navegación

Una vez activadas las “**Clases CSS**“, ve al estructura del menú que es de tu interés, asegúrate que por cada elemento de navegación se muestre el campo “**Clases CSS (opcional)**“:

!(https://lh5.googleusercontent.com/-6XANXtt4M_w/UtGPQOp_B2I/AAAAAAAAAHw/nlnty1dd_Co/s800/anadir-iconos-a-los-menus-en-wordpress-3.png)

Para este ejemplo queremos añadir iconos a nuestro “**Menú Principal**“, el cual está formado por los elementos:

- Inicio

- Nosotros

- Tienda

- Contacto

- Blog

- Mi cuenta

Visita el “(http://fortawesome.github.io/Font-Awesome/cheatsheet/)” oficial de “**Font Awesome**” para visualizar los iconos disponibles, así como las clases CSS de cada icono en particular:

!(https://lh6.googleusercontent.com/-XPtC429EICw/UtGPQoNGNmI/AAAAAAAAAH8/IYAufa_XXEI/s800/anadir-iconos-a-los-menus-en-wordpress-4.png)

Observa que cada clase inicia con el prefijo “**fa-**“. Copia ese prefijo y pégalo en el campo “**Clases CSS (opcional)**” de cada elemento del menú en WordPress:

!(https://lh4.googleusercontent.com/-T3Mjpbtnuws/UtGPQ4rXg5I/AAAAAAAAAH0/4-W25725c7Y/s800/anadir-iconos-a-los-menus-en-wordpress-5.png)

Repite el procedimiento para el resto de los elementos del menú. En este ejemplo utilizaremos:

**Elementos del menú de navegación:**

- Inicio

- Nosotros

- Tienda

- Contacto

- Blog

- Mi cuenta

**Clases CSS a utilizar:**

- fa-home

- fa-users

- fa-shopping-cart

- fa-envelope-o

- fa-files-o

- fa-key

Una vez que hayas integrado las clases CSS a los elementos de tu menú, asegúrate de guardar los cambios y de asignar el menú a la ubicación que es de tu interés. La ubicación de los menús que se desplegaran en tu tema puedes controlarla desde la pestaña **“Gestionar lugares**“:

!(https://lh6.googleusercontent.com/-GVQu-q56BAc/UtGT_K78d5I/AAAAAAAAAIQ/HogfFNFpQPs/s800/anadir-iconos-a-los-menus-en-wordpress-6.png)

Al final el resultado lucirá similar a:

!(https://lh5.googleusercontent.com/-N6HUMcuVUdM/UtGVAG-H9MI/AAAAAAAAAIY/-ODwVkqjJmg/s800/anadir-iconos-a-los-menus-en-wordpress-7.png)

(http://wordpress.org/plugins/font-awesome-4-menus/)

---

## Comentarios finales

“**Font Awesome 4 Menus**” es un plugin ligero y con muy pocos problemas de compatibilidad gracias a que no requiere de JavaScript, ahora que conoces este interesante plugin no dudes en añadir iconos a los menús en WordPress, inclusive puedes utilizar iconos en entradas o páginas utilizando un shortcode similar a:

//* Cambia la clase CSS "fa-home" a placer: http://link.mvkoen.com/1aR7Z5t

 

Leído en (https://mvkoen.com/anadir-iconos-a-los-menus-en-wordpress)