Usar Font Awesome con Grunt
Dec 28, 2013—
—Edit in GithubParte de lo que ando haciendo últimamente con Laravel incluye el manejo de assets, y aunque hay algunos paquetes para el manejo de estos dentro de Laravel, la mejor opción parece ser usar Bower y Grunt, y la verdad es una maravilla.
En el proyecto con el que ando trabajando quiero usar Font Awesome para aprovechar la variedad de iconos que trae, y para eso necesitamos tanto el CSS (o SCSS en mi caso) como las fuentes que trae.
Primero que nada es instalar los assets con Bower, nuestro .bowerrc
es:
Y el bower.json
:
Con esto corremos un bower install
y esperamos que descargue los componentes. Para compilar el SCSS usamos el modulo grub-contrib-sass con la siguiente configuración:
En la pagina del plugin de grunt explica la configuración, pero básicamente le decimos que nos compile el archivo app.scss en app.css, y dependiendo del ambiente en que queramos, si lo compila expandido (para desarrollo) o minificado (para producción). La opcion de compass: true
es debido a que estoy usando Foundation y con esto nos lee el archivo config.rb de Compass.
Dentro de mi app.scss solamente importo el SCSS de Font Awesome y listo, tenemos el CSS. ¿Y que pasa con las fuentes? Para esto uso el plugin grunt-contrib-copy, el cual como su nombre lo dice nos sirve para solamente copiar archivos. La configuración vendría siendo algo como esto:
¡Y listo! Con esto nos copia todos los archivos de la carpeta Font-Awesome/fonts
a public/fonts
que es la ruta por default que usa el CSS de Font Awesome (considerando que nuestro css default esta en public/css/app.css
).
Espero les ayude :)