jueves, 9 de abril de 2020

Configuar Font Awesome en Laravel 5.6

Font Awesom es un framework de iconos vectoriales y estilos css que podemos incluir en nuestra aplicación Laravel y hará que luzca de maravillas!.
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:


Y nos vamos a ir a nuestro package.json y vamos a copiar en la línea de dependencias que hemos visto más arriba que se nos instaló de Fontawesome, vamos a copiar esa línea y la vamos a pegar en este archivo de app.scss, quedándonos de la siguiente manera:

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

Creando plugin Wordpress - 03

  11- USUARIOS -Para crear un usuario lo mas facil desde el admin- FUNCIONES PARA AGREGAR USUARIO: wp_create_user ( string  $username , stri...