WordPress: Cómo añadir iconos a los botones del menú

¡Buenos días! Hoy vamos a ver cómo darles más personalidad a los botones de nuestro menú añadiéndoles iconos en WordPress. ¡Vamos allá!

Seguiremos los siguientes pasos:

1. Accedemos a Apariencia > Menús.

2. Vamos a la pestaña Opciones de pantalla y activamos la opción Clases CSS, si no la teníamos ya activada.

3. Desplegamos las opciones de cada botón y asignamos una clase CSS a cada uno de ellos (en el vídeo sólo lo hago con uno pero simplemente se trataría de repetir el proceso).

4. Accedemos al archivo style.css o a cualquier otra opción que utilicemos para añadir nuestro CSS (como por ejemplo un plugin).

5. Añadimos las siguientes líneas de código:

.la-clase-del-boton {
background-image: url('http://empresiona.dev/wp-content/uploads/2017/06/house.png');
background-repeat:no-repeat;
background-position: left;
padding-left: 10px;}

6. Cambiamos el texto en negrita por el que nos corresponde. Al principio escribimos la clase que hemos asignado al botón en el paso 3 y cambiamos la url por la del icono que queremos mostrar (el que hemos de subir a nuestra web previamente, y preferiblemente en formato png).

Ahora si guardamos y vamos a nuestra web, el icono que le hemos asignado se mostrará a la izquierda. Para conseguir iconos os recomiendo FlatIcon, pero seguro que hay muchas más opciones en Internet y no son muy difíciles de encontrar.