Iconos en Angular con Font Awesome

Clase 9 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Johann Nicolás Nieto Cárdenas

student•

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>

David Matias Casco Lobos

student•

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.

Diego Lozano

student•

Buen aporte, lo hice igual que tú y sirve demasiado para practicar.

José Nicolás Aristizabal Ramírez

student•

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

Rolando Fernández

student•

En la versión 3.3.5 de TailwindCSS me funcionó la siguiente configuración

container: {
  screens: {
    mobile: "600px",
    tablet: "900px",
    desktop: "1200px",
  },
},

Victor Alfredo Matzar Say

student•

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;
}

Sebastian Mateus Martinez

student•

Solución del reto (no encontré todos los iconos así que puse los que mas se relacionara o pareciera): Original:

Clon:

https://github.com/Smateus919/Curso-cdk-tailwind

Brenda Sutara

student•

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 👇

Hearly Sebastian Huertas Perez

student•

Mi solución

Juan Daniel Castrellon

student•

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>

Juan Daniel Castrellon

student•

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>

Yo logré hacer esto con la maquetación.

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>

Alejandro Ruiz

student•

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>

Daniel Andrés Pinto Ortega

student•

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' }