Blogger: Usando Awesome para construir un menú de texto con iconos

El otro día os presenté el asunto de crear iconos mediante archivos de fuentes modificados, para insertar pictogramas en lugar de los típicos caracteres alfanuméricos. En concreto hablé un poco de qué era y cómo utilizar la fuente Awesome.
Pues como dicen en una comunidad sobre CSS que visito menos de lo que debiera, "Hasta no ver la demo es un dragón", así que para hacer realidad la teoría, hoy un sencillo pero resultón menú que deja ver los respectivos iconos programados cuando se pasa el puntero por encima del texto que servirá de enlace. Alguien me pidió algo parecido hace unas semanas, así que helo aquí.

Como la explicación genérica ya iba en el post que enlacé al principio, ahí va directamente el código.
En primer lugar incluimos nuestra lista de enlaces. Eso puede ser en la plantilla o añadido desde la vista Diseño en un nuevo gadget tipo HTML/JavaScript (Blogger), situado por ejemplo encima del cuerpo de las entradas. La única diferencia en el código será que en primer caso (plantilla), las comillas dobles (") habrá que cambiarlas por comillas simples (') para que el código se interprete bien.

<ul class="iconmenu">
<li><a href="ENLACE_1">Inicio</a></li>
<li><a href="ENLACE_2">Galería</a></li>
<li><a href="ENLACE_3">Birra</a></li>
<li><a href="ENLACE_4">Contacto</a></li>
</ul>

Lo que corresponde personalizar aquí será la dirección de destino de los enlaces (ENLACE_X), el texto visible de los mismos (Inicio, Galería, etc.) y los iconos que queremos que aparezcan. Para esto último habrá que buscar en este catálogo el nombre y listo.
Luego, editando la plantilla, cargamos un par de ficheros CSS. Uno para la fuenteAwesome y otro con una fuente "normal" que utilizaremos para el texto del menú. He usado la Oswald, pero evidentemente podéis usar cualquiera que os guste más. El catálogo completo de las disponibles en Google Fonts, accediendo al anterior enlace.
El mejor sitio para añadir estas dos líneas sería en el head, pero a mí me ha tragado con este código también en posts e incluso en la parte HTML de la plantilla.

El último paso será añadir el estilo, responsable como siempre de la "magia". Como seguro que todavía alguien pregunta, en Blogger se inserta o bien entre las etiquetas skin de la plantilla o bien desde el Diseñador de plantillas: Plantilla > Personalizar > Avanzado > Añadir CSS

ul.iconmenu {
margin: 10px auto;
padding: 0;
text-align: center;
font-size: 0;
}
ul.iconmenu li {
position: relative;
display: inline-block;
overflow: hidden;
padding: 20px 10px 5px;
font-family: Oswald, sans-serif;
font-size: 30px;
}
ul.iconmenu li a {
text-decoration: none;
color: orange;
}
ul.iconmenu li a:hover {
color:orangered;
}
ul.iconmenu span.fa {
font-size: 24px;
}
ul.iconmenu li a span {
display: none;
position: absolute;
top: 0;
left: 50%;
margin-left: -12px;
}
ul.iconmenu li a:hover span {
display: block;
}

¿Lo vemos funcionando?

Inicio
Galería
Birra
Contacto

En este Codepen están las dos demos que incluí en esta entrada y allí mismo podéis trastear para hacer vuestras pruebas e ir cambiando valores hasta llegar al estilo que más os guste.
Esta sería por ejemplo una pequeña variación