[MÚSICA] [MÚSICA] [MÚSICA] Hola. Comenzaremos este tutorial para trabajar con iconos. Bootstrap 4 a diferencia de Bootstrap 3 dejó de tener una librerÃa default de manejo de iconos y paso a sugerir una serie de librerÃas de las cuales dos te garantizan que están testeadas, que funcionan correctamente, una es la que acabamos de usar que es Open iconic, otra es Opticons que es de [INAUDIBLE], ambas son muy buenas. Y luego te sugiere algunas más que son interesantes revisar y a veces que depende del proyecto que vos estés llevando adelante. Probablemente tenga una librerÃa de iconos que quizás se adapte mejor al estilo de sitio que vos querrás desarrollar. Acá en este caso vamos a usar una de las librerÃas recomendadas como te dije antes, principalmente por su facilidad de uso y configuración, y sobre todo para que nos vayamos familiarizando con el uso de esta forma de manejar iconos como fuentes en vez de manejarlo como imagen, es otra forma de utilizar la misma herramienta. La ventaja de utilizarlo como si fuera una fuente es que podemos cambiarle los colores, el tamaño y demás como si fuera un texto dentro de un párrafo. La librerÃa es esta, cuando lleguen a este sitio que es el link sugerido por Bootstrap, asegúrate que entres por https porque sino te va a tirar un mensaje de error y sin poder continuar. Siempre es bueno que vayamos del modo seguro. Acá puedes ver algunas de las guÃas de los iconos, y comencemos directamente a trabajarlos. Lo primero que vamos a hacer es instalarlo, npm install open-iconic, save, aquà comenzará a instalarse. Vemos aquà estoy dentro de un modo use de la carpeta en iconic. Aquà van a estar los ccs que vamos a utilizar, aquà está bien. Directamente. Y vamos a incluirlo en style sheet, en modules, open iconic, font, css open iconic-bootstrap porque you trae una suite configurada, adaptada mejor dicho para nosotros, para bootstrap. Vamos a correr nuestro sitio. Aquà tenemos a hoteles corriendo y voy a minimizar esto [INAUDIBLE] Vemos que ocupa espacio y lo siguiente que vamos a hacer es incluir algunos iconos para ir aprendiendo a utilizarlos. Vamos a usar algunos no más. Tampoco hoy en dÃa no se usa tanto cargar tanto con iconos, quizás como usar algún icono en lugar de algún texto o acompañar el significado de alguna operación. Asà que queremos darle alguna intención más, pero no hay que abusar, porque sino queda una página muy cargada visualmente y no es un sitio atractivo, no es atractivo, no es un buen criterio. De todas formas ahora vamos a usar uno como para aprender a utilizarlos. Dentro de open iconic, dentro del sitio, recomiendo que lo tengas abierto mientras trabajemos, aquà vas a poder ver todos los iconos que están y vamos a elegir uno para agregarlo por ejemplo al teléfono. A veces se puede buscar y aquà encontramos por ejemplo el que querÃamos tener por palabra, y acá fÃjate que you nos tiene como es la sintaxis para incluir el icono de bootstrap. Copiamos, y lo podemos agregar al lado del teléfono justamente, Veamos cómo queda. Aquà vas a ver que está. Vamos a agregar el simbolito de mail y a lo mejor una casita para identificar ahà la dirección, a ver, vemos alguno. Por ejemplo inbox para el mail. [AUDIO_EN_BLANCO] Aquà incluimos y el de home para la dirección. [SONIDO] [INAUDIBLE] muy pegados, por lo tanto lo que podemos hacer es agregarle una clase nosotros que incluya el para que quede un poquitito separado. Entonces podemos acá hacerlo footer address icon para esta clase, asà lo tenemos que escribir por demás. [INAUDIBLE] correr desde el principio tan popular en no repetir la misma tarea dos veces, no repetir tareas concretamente. Entonces lo vamos a escribir una única vez. Vamos a usar un padding right vemos con 10 pixeles para ver qué tal resulta. Bueno, aquà queda un poquito más prolijo. Bien. Podemos agregar alguno más, si te parece entra al botón reservar que sea por ejemplo algún icono que represente una transacción. Vemos una operación y por ejemplo puede ser el botón más par significar que queremos agregar esta reserva. Por supuesto que estamos eligiendo algunos ejemplos no más. Lo podemos agregar dentro de aquà por ejemplo al lado de la palabra reserva, reservar. Veamos cómo queda. Algunos sugieren poner esto cuando, en el sitio de creación. Hay una nueva operación de creación. FÃjate que en este caso tenemos fondo negro, acá fondo blanco. ¿Por qué? Porque estamos dentro de la sintaxis de mejor dicho, dentro de los estudios que aplicamos en, dentro del botón, este botón primary lo que hace es poner la fuente en blanco y el background, todo lo que es el fondo del texto lo ocupa con este azul [INAUDIBLE]. Podemos agregarle en este caso si queremos separarlo un poco está bien, pero podemos modificarle también el color. FÃjate que lo voy a hacer con solo para que veas, podrÃamos cambiarle acá el color y ponerle el color rojo, lo va a incluir, no es lo que mejor quede. Vamos a quitarlo. Y puedes agregar mucho más, puedes agregar los iconos de Facebook, Twitter, Instagram, Google y todo el resto de las cosas que vos quieras ir probando, Yo después voy a agregar este signo a todos los botones como para tener algo más que refleje esto en el sitio, y te animo a que pruebes las diferentes librerÃas y notes lo sencillo que es incorporarles iconos y modificarle sus estilos, tal como lo hacemos con cualquier texto, párrafo o cualquier otro elemento html. Para finalizar, como siempre vamos a realizar un commit, o sea que ahora tenemos la librerÃa de iconos, vamos a agregarla. Vamos a ponerle usando open icons y lo subimos. [MÚSICA] [MÚSICA]
