Colocar iconos en los enlaces del menú

Seguramente alguna vez pensaste en colocar iconos en los enlaces de tu menú de páginas para que los usuarios puedan identificar fácilmente el contenido de cada enlace. En la mayoría de plantillas de terceros es fácil agregarlos, pero cuando es un gadget de Páginas se pone mas difícil el tema. Esto porqué sucede, bueno es por el hecho de que este gadget no es tradicional al de un menú de HTML, este gadget tiene una serie de códigos propios de Blogger, que los agrega automáticamente.

Aquí en HoyGeek tenemos la solución para esto. En esta entrada veremos a como colocar iconos a los enlaces del menú de Pagínas. Para poder lograrlo usaremos los pseudo-clases  :nth-child()  y  ::before 

Paso 1

En primer lugar entraremos a Plantilla > Editar HTML y antes de ]]></b:skin> agregamos el siguiente codigo

#PageList1 li:nth-child(1):before {
content: url(URL-IMAGEN);
padding-right: 5px;
position: relative;
top: 1px;
}

#PageList1 li:nth-child(2):before {
content: url(URL-IMAGEN);
padding-right: 5px;
position: relative;
top: 1px;
}

#PageList1 li:nth-child(3):before {
content: url(URL-IMAGEN);
padding-right: 5px;
position: relative;
top: 1px;
}

En el codigo anterior vemos que tenemos unos numeros de color azul, estos son cada uno de los enlaces respectivamente en ese orden. Es decir, el 1 es el primer enlace del menu, el 2 es el segundo y así sucesivamente.

Ahora también veremos que hay un texto de color rojo, en esa parte es donde tendremos que colocar la URL de la imagen que queremos que tenga el enlace.

Si queremos modificar la distancia que hay entre la imagen y el texto, solo cambiamos
en padding-right.

Con la propiedad de top podremos modificar la distancia verticalmente, arriba y abajo. Si queremos subir la imagen usaremos un valor negativo, y si queremos bajar la imagen usaremos un valor positivo.

Extra

Si tu menú tiene mas de 3 enlaces, bueno solo tendremos que agregar al código anterior este otro:

#PageList1 li:nth-child(4):before {
content: url(URL-IMAGEN);
padding-right: 5px;
position: relative;
top: 1px;
}

Por cada código que agregues, el numero azul varia. Es decir si agregas otro más ya no sería 4 sino 5 y así sucesivamente.