Desde hace unos días comencé a usar en este blog la fuente tipográfica Font Awesome, que es una fuente de iconos mediante la que se pueden insertar algunos iconos sociales y símbolos en lugar de imágenes, con lo que la página es más ligera. Pueden ver el resultado al pie de este post, donde aparecen los iconos de Twitter, Facebook y Google Plus. No se trata de imágenes, como digo, sino de tipografía que se puede estilizar mediante css.
Buscando la manera de utilizar Font Awesome para incluir más iconos me encuentro la agradable sorporesa de que Guillermo Latorre había escrito hace algunas semanas un post al respecto, anunciando además la disponibilidad de Font Awesome More, que es la evolución de la otra.
Así que me la he descargado y he sustituido los archivos de la fuente antigua por la nueva versión, y ya estoy pensando en usarla para mis otros blogs. Las ventajas, como digo, son que al ser tipografías no cargan tanto la página como si fueran imágenes, y que existen iconos disponibles para prácticamente todas las redes sociales. Incluso el icono del enlace que pueden ver en las minientradas de este blog usa esa tipografía. Las posibilidades son muchas y sorprendentes.
Les remito al post de Guillermo Latorre en Hachemuda: Font Awesome 2.0: colección de iconos para la web en forma de tipo de letra, donde explica perfectamente cómo usar la fuente tipográfica.
Simplemente les comparto la manera en que la he implementado en este blog, y que consiste en los siguientes pasos:
1. Descargar la fuente Font Awesome More de la web oficial.
2. Subir los archivos a la carpeta del theme de WordPress que estoy usando.
3. Editar el archivo style.css del theme y añadir las siguientes líneas:
@font-face {
font-family: "FontAwesome";
src: url('includes/fonts/fontawesome/fontawesome-webfont.eot');
src: url('includes/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'),
url('includes/fonts/fontawesome/fontawesome-webfont.woff') format('woff'),
url('includes/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'),
url('includes/fonts/fontawesome/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}
Teniendo en cuenta que debes sustituir la ruta includes/fonts/fontawesome/ por aquella en la que hayas colocado los archivos de la fuente.
4. Insertar los iconos en el theme. Para ello, allí donde quieras que aparezcan debes insertar el siguiente código:
<i class="icon-twitter"></i>
En este ejemplo insertaríamos un icono de Twitter. Para ver todos los disponibles podemos consultar el listado de la web oficial: All Icons. Y debemos tener siempre en cuenta que al ser una fuente tipográfica tendrá por defecto el mismo tamaño y atributos que el texto, a menos que le apliquemos reglas css diferentes.
