Wordpress

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.

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:

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.

En nuestro style.less hacemos un @import de nuestro 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

¡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