Cómo añadir iconos en el menú

Si quieres añadir iconos en el menú de navegación de tu sitio web o de tu blog diseñado con el gestor de contenidos WordPress y no sabes cómo hacerlo, te interesará leer este artículo. Agregar iconos en el menú de navegación es realmente fácil.

En dos sencillos pasos te explicaremos cómo se puede añadir iconos en el menú para que puedas sacar provecho de esta funcionalidad y personalizar el menú de navegación haciéndolo más original e intuitivo.

1) Instalar el plugin Font Awesome

En primer lugar, instalaremos el plugin gratuito para WordPress Better Font Awesome, con el que tendremos acceso al completo paquete de 675 iconos con los que actualmente cuenta la versión 4.7.0. de Font Awesome.

Puedes descargar este plugin desde el repositorio oficial de plugins de WordPress. Una vez instalado, no olvides activar el plugin y revisar su configuración en Ajustes > Better Font Awesome de tu menú WordPress.

Si seleccionas la opción «Always Latest» en la versión a utilizar, te asegurarás de disponer siempre de la última versión del paquete de iconos de Font Awesome.

2) Personalizar el menú de navegación

Es el momento de configurar el menú de navegación de tu sitio web o blog para darle ese toque personal que estás buscando, añadiendo algún icono.

Supongamos que quieres añadir un icono delante del título de una sección en tu menú. Por ejemplo, vamos a añadir un icono delante del título de la sección «Blog» del menú de navegación de nuestro sitio web.

[bctt tweet=»Explicamos cómo añadir #iconos en el menú de tu sitio web o blog» username=»genealiaonline»]

Accede a Apariencia > Menús desde el menú de WordPress para ver la estructura del menú de tu sitio web o blog. Aquí es donde puedes colocar los elementos del menú en el orden que prefieras.

En este caso, vamos al elemento denominado «Blog» y hacemos clic en la flecha que hay a la derecha para que se muestren más opciones de configuración.

¿Sabes ya qué icono quieres mostrar delante de la etiqueta de navegación? Puedes explorar entre los 675 iconos que te ofrece Font Awesome en su sitio web y, una vez hayas elegido el que te parezca más apropiado, sólo tienes que quedarte con el nombre que tiene asignado.

Por ejemplo, nosotros elegimos el icono que muestra un lápiz y nos quedamos con su nombre «pencil».

Ahora llega el momento de añadir el código necesario para que se muestre el icono que hemos elegido. El código siempre será el mismo, variando únicamente el nombre del icono que quieras que se muestre. Verás qué fácil resulta. Copia el código que se muestra a continuación:

<i class=»fa fa-pencil»></i>

Y pégalo delante de la etiqueta de navegación de tu menú en la que quieras que se muestre el icono. En nuestro caso, lo pegamos delante de la etiqueta Blog:

El resultado que obtenemos es el siguiente:

Cómo añadir iconos en el menú (los que tú quieras)

Visto el ejemplo anterior, elige el icono que tú quieras y sustituye el nombre del icono del ejemplo por el tuyo.

Es decir, cambia el nombre del icono Font Awesome (marcado en color amarillo) que va detrás del prefijo fa-. Sólo tienes que introducir el nombre del icono que quieras que se muestre.

<i class=»fa fa-pencil«></i>

En este caso, sustituye la palabra pencil por la del icono que hayas elegido. Así de sencillo.

 

Esperamos que te haya parecido útil este artículo. Puedes comentar, preguntar cualquier duda o pedir ayuda, e intentaremos echarte una mano, ¡como siempre!

Quizás también te interese SEO para principiantes.

 

¿Te ha gustado este artículo?

[yasr_visitor_votes size=»large»]