Por qué usar Font Awesome?, porque este framework tiene más de 400 íconos disponibles, de libre licencia y una estupenda escalabilidad, si queremos hacerlos más grandes o más pequeños, nunca tendremos problemas de resolución!.
Pero, ¿Cómo incluir Font Awesome en nuestro proyecto de Laravel?.
Vamos a ello, explicado step by step!.
Doy por hecho que ya tienes montado tu proyecto de Laravel, es decir, que ha sido creado ya.
Si nos vamos a package.json vamos a ver lo siguiente:
Aquí vamos a ver todas las dependencias de nuestra aplicación.
Ahora, vamos a abrir la línea de comandos y vamos a escribir la siguiente línea para instalar npm:
Ahora, vas a ir al siguiente enlace:https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers que es la página de Font Awesome y vas a ver que ya estás dentro de npm : using-package-managers: vas a ver que aparece la siguiente línea que es la que vas a copiar en tu línea de comandos:
Ok!, ahora, si te vas a tu package.json vas a ver que tienes instalada la siguiente dependencia:
Ahora, vamos a copiar algún ícono de Font Awesome y lo vamos a copiar en alguna vista: resource / views.
Por ejemplo en welcome.blade.php
Ahora, si nosotros escribimos en la línea de comandos, lo siguiente:
Podemos ir viendo todos los cambios que vamos haciendo.
Ahora, te vas a ir al archivo : resources / assets / sass / app.scss y vas a ver lo siguiente:
Es allí donde vamos a duplicar la siguiente línea:
Qué hemos hecho?, hemos copiado la línea que estaba en package.json y hemos ido hasta el archivo que se encuentra Font Awesome, que lo encontraras en:
node_modules / @fortawesome\fontawesome-free / scss / fontawesome.scss
Y, abajo hemos ido a los archivos:
node_modules / @fortawesome\fontawesome-free / scss / solid.scss
node_modules / @fortawesome\fontawesome-free / scss / regular.scss
node_modules / @fortawesome\fontawesome-free / scss / brands.scss
Así tendremos disponibles Solid, Regular y Brands !.
Y arriba, justo debajo de las variables hemos copiado otra línea, que es opcional, y la encontramos en: https://fontawesome.com/how-to-use/on-the-web/using-with/sass y nuestro código completo va a quedar así:
Ahora, ves a la consola y ejecuta la línea:
No te olvides que en el archivo app.blade.php debes tener si o si en el head:
Y en los scripts:
Además de tus estilos Bootstrap cargados, en el caso de que no hagas el scafolding Auth, debes hacerlo manualmente.
Listo!
Facilito, no?.
Salud !














No hay comentarios:
Publicar un comentario