Iconos en Angular con Font Awesome
Clase 9 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Johann Nicolás Nieto Cárdenas
student•
hace 3 años
Johann Nicolás Nieto Cárdenas
David Matias Casco Lobos
Diego Lozano
José Nicolás Aristizabal Ramírez
Rolando Fernández
Victor Alfredo Matzar Say
Sebastian Mateus Martinez
Brenda Sutara
Hearly Sebastian Huertas Perez
Juan Daniel Castrellon
Juan Daniel Castrellon
Alejandro Ruiz
Daniel Andrés Pinto Ortega
En vez de poner ese div adicional que pone Nico para separar los íconos entre sí, pueden usan la propiedad gap-x-2 para separarlos entre sí:
<div class="flex items-center gap-x-2"> <button class="text-white" type="button"> <fa-icon [icon]="faBell"></fa-icon> </button> <button class="text-white" type="button"> <fa-icon [icon]="faInfoCircle"></fa-icon> </button> <button type="button" class="flex rounded-full" ...> ... </button> </div>
Como reto personal, he renderizado los boards de forma dinámica (ngFor + Array de objetos) , a los objetos le puse propiedad label y color, label contiene el nombre del board y color contiene la clase de tailwind del color de background. Utilicé ngClass para renderizar el color.
Es un reto sencillo pero sirve para practicar.
Buen aporte, lo hice igual que tú y sirve demasiado para practicar.
Tengo la version 13.1.3 de angular y tuve problemas instalando Font Awesome 6 por ende tuve que intentar con la version 5 y funciona !!! Espero que no existan muchas diferencias entre estas versiones de Awesome
En la versión 3.3.5 de TailwindCSS me funcionó la siguiente configuración
container: { screens: { mobile: "600px", tablet: "900px", desktop: "1200px", }, },
Mi solución :):
<app-navbar></app-navbar> <main class="container mx-auto md:flex"> <aside class="hidden w-64 px-4 pt-10 md:block"> <ul class="space-y-1"> <li> <a class="text flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500" href="" ><fa-icon class="mx-2" [icon]="faTrello"></fa-icon> <p>Boards</p></a > </li> <li> <a class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500" href="" ><fa-icon class="mx-2" [icon]="faBorderTopLeft"></fa-icon> <p>Templates</p></a > </li> <li> <a class="flex rounded py-1.5 text-sm font-medium transition duration-200 ease-out hover:bg-gray-200 hover:ease-in active:bg-sky-100 active:text-sky-500" href="" ><fa-icon class="mx-2" [icon]="faChartLine"></fa-icon> <p>Home</p></a > </li> </ul> </aside> <article class="w-full"> <section class="px-3"> <h3 class="pt-5 font-medium md:pt-10"> <fa-icon class="px-3" [icon]="faClock"></fa-icon> Recently viewed </h4> <div class="my-4 grid grid-cols-[repeat(auto-fit,minmax(200px,_1fr))] gap-4" > <div class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75" > <p class="absolute font-semibold text-white">Demo</p> </div> <div class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75" > <p class="absolute font-semibold text-white">Proob</p> </div> <div class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75" > <p class="absolute font-semibold text-white">Proob</p> </div> <div class="relative h-24 w-full rounded bg-blue-500 p-1.5 hover:cursor-pointer hover:opacity-75" > <p class="absolute font-semibold text-white">Proob</p> </div> </div> </section> </article> </main>
import { Component } from '@angular/core'; import { faTrello } from '@fortawesome/free-brands-svg-icons'; import { faClock } from '@fortawesome/free-regular-svg-icons'; import { faBorderTopLeft, faChartLine } from '@fortawesome/free-solid-svg-icons'; @Component({ selector: 'app-boards', templateUrl: './boards.component.html' }) export class BoardsComponent { faClock = faClock; faBorderTopLeft = faBorderTopLeft; faChartLine= faChartLine; faTrello = faTrello; }
Solución del reto (no encontré todos los iconos así que puse los que mas se relacionara o pareciera): Original:
Clon:
Cómo puedo hacer para que los iconos sean regular? no se cómo cambiar para que los iconos no sean sólidos. Asi lo tengo ahora 👇
<button class="text-gray-800 text-xl" type="button"> <fa-icon [icon]="faBell"></fa-icon> </button>
asi quiero dejarlo 👇
Mi solución
Yo logré esto con mi solución
Comparto la solución por si alguien tiene una mejora:<app-navbar /><div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div></div>
<app-navbar /> <div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div> </div>
Yo logr<app-navbar /><div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div></div>
Comparto mi código, y si alguien tiene mejoras súper :)
<app-navbar /> <div class="flex flex-row w-auto h-auto bg-white mx-32 my-10 gap-10"> <div class="w-1/4"> <ul class="py-1 mb-3" > <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faTrello"></fa-icon> <a href="#" class="ml-4" >Board</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faGopuram"></fa-icon> <a href="#" class="ml-4" >Templates</a> </li> <li class="block py-3 px-4 font-bold text-base text-sky-900 hover:bg-sky-100 hover:text-sky-600 rounded"> <fa-icon [icon]="faHome"></fa-icon> <a href="#" class="ml-4" >Home</a> </li> </ul> <div class="flex w-auto"> <div class="text-sm px-4 w-11/12 text-gray-500 font-bold">Workspaces</div> <div class="w-1/12"><fa-icon [icon]="faPlus"></fa-icon></div> </div> </div> <div class="w-3/4"> <div class="flex gap-3 text-xl font-bold text-sky-950 pt-1 pl-3"> <fa-icon [icon]="faClock"></fa-icon> <span>Recently viewed</span> </div> <app-board color="sky-700">Demo</app-board> <div class="w-auto h-24" ></div> <h2 class="font-bold text-lg text-gray-500 ml-1 mb-3" > YOUR WORKSPACES </h3> <div class="flex w-auto h-auto justify-between" > <div class="flex bg-gradient-to-t from-red-700 to-red-300 h-12 w-12 rounded text-white text-3xl font-bold justify-center items-center ml-1"> J </div> <div class = "flex justify-center items-center ml-3 mr-10"> <h3 class="text-sky-950 font-bold text-lg" > Juan Daniel's workspace </h4> </div> <div class="flex gap-5 justify-start w-auto" > <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Boards</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Views</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Members</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Settings</button> <button class="bg-sky-100 px-3 rounded text-sky-900 font-semibold my-1 hover:bg-sky-600 hover:text-white" >Upgrade</button> </div> </div> <div class="flex overflow-x-auto gap-3 w-auto" > <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-700" fontWeight="bold">Demo</app-board> <app-board color="sky-100" [location]="true" fontSize="sm">Create new board</app-board> </div> </div> </div>
Mi solucion!
Este es el codigo que hice para poner la estrellita en la esquina de abajo:
<div *ngFor="let board of boards" class="bg-sky-700 text-white px-4 py-2 flex flex-col justify-between w-full h-24 rounded" > <h1 class="capitalize">{{ board.title }}</h2> <div class="text-right text-sm"> <button (click)="board.favorite = !board.favorite"> <fa-icon [icon]="board.favorite ? faStarSolid : faStar"></fa-icon> </button> </div> </div>
Para la versión 3.3.3 de Tailwind solo tendrían que agregar en 'themes' el siguiente código:
screens:{ sm: '640px', md: '768px', lg: '1024px', xl: '1024px', '2xl': '1536px' }