Respuesta rápida
Descargar Font-Awesome y añadirlo a nuestro theme con la estructura de functions.php extension. Hacemos un @import de font-awesome.less en nuestro style.less. Si tenemos Bootstrap habrá que eliminar de sus LESS el glyphicons.less para evitar conflictos.
Respuesta completa
Requisitos:
Font-Awesome es una librería que te permite tener imágenes escalables, es decir, que siempre tendrá buena calidad sin importar el tamaño.
Las imágenes son vectoriales y están en formato fuente.
Como ejemplo tonto, si escribes una ‘a’, te saldrá una imagen. Pero así no se utilizan.
Para colocar un icono se puede hacer a través de html o de css.
Todos los iconos están disponibles en su página oficial.
Por ejemplo, queremos añadir el icono de la cerveza en nuestra descripción.
<h2 class="site-description"><i class="fa fa-beer"></i> ... </h2>
/* Mostrar la cerveza delante de site-description */
.site-description:before {
font-family: 'fontawesome';
content: @fa-var-beer;
}
/* Mostrar la cerveza detrás de site-description */
.site-description:after {
font-family: 'fontawesome';
content: @fa-var-beer;
}
Estructura de ficheros
Para incorporar Font-Awesome a nuestro theme usaremos la estructura de function.php extensions. Por lo tanto, los archivos a editar serán:
alisios |- framework | |- extensions | |- font-awesome | |- fonts | | |- ... | | | |- less | |- font-awesome.less | |- variables.less | |- ... | |- style.less
Configuración previa
En variables.less hay que editar la variable @fa-font-path, el cual contendrá la dirección de la carpeta que contiene las fuentes.
También se puede usar las fuentes de Bootstrap directamente.
@fa-font-path: "framework/extensions/font-awesome/fonts"; //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts"; // for referencing Bootstrap CDN font files directly
En nuestro style.less hacemos un @import de nuestro font-awesome.less
/** * Imports libs: * Font-Awesome 4.0.3 */ @import 'framework/extensions/font-awesome/less/font-awesome.less';
Posibles conflictos
En caso de que, como yo, también estés usando Bootstrap, es recomendable quitar glyphicons.less
Para eso solo es necesario comentar de bootstrap/less/bootstrap.less la línea
//@import "glyphicons.less";
¡Ya está!
Como última recomendación, si los iconos son estáticos, es decir, no se van a cambiar en ningún momento una vez colocados en nuestro theme, es mejor añadirlos a través del css.
Ver Alisios v0.2.1
