Añadir Font Awesome correctamente en Sage (Roots)

Si utilizas Sage en tus proyectos WordPress, es muy posible que precises de Font Awesome, especialmente si utilizas Bootstrap 4, ya que esta nueva versión de Bootstrap no contiene por defecto los Glyphicons habituales en otras versiones más antiguas de este Framework.

Integrar dependencias en Bower mediante nuestro json es relativamente sencillo, el problema es que Sage no reconoce la ruta por defecto de las dependencias que le integramos, por lo tanto hay que decirle a nuestro json cual es la ruta que tiene que usar para ir a buscar las fuentes de forma correcta, configurando los overrides para evitar la confusión en la ruta del archivo.

La sintaxis que tenemos que utilizar es la siguiente:

	  ],
	  "license": "MIT",
	  "private": true,
	 "dependencies": {
		"font-awesome": "fontawesome#^4.6.3"
	},
	"overrides": {
	"font-awesome": {
	  "main": [
	    "./scss/font-awesome.scss",
	    "./fonts/*"
	  ]
	}
},

También podemos integrar Font Awesome con el siguiente comando en nuestro workflow

bower install font-awesome --save

Y configurar en los overrides la sintaxis siguiente:

	},
	"overrides": {
	"font-awesome": {
	  "main": [
	    "./scss/font-awesome.scss",
	    "./fonts/*"
	  ]
	}
},

Quizás te interese leer:

Instalar y configurrar Sage Starter theme en WordPress

Tutorial de Bower