Utiliza Font-Awesome (con LESS.js) para el diseño de tu WordPress Theme

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