No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Iconos en Angular con Font Awesome

9/24
Recursos

Aportes 11

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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.
En la versión 3.3.5 de TailwindCSS me funcionó la siguiente configuración ```js 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
      </h3>
      <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:

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

Mi solución ![](https://static.platzi.com/media/user_upload/image-0fc6921e-c112-4468-b363-256cbc3f4eef.jpg)
Yo logré esto con mi solución ![](https://static.platzi.com/media/user_upload/Screenshot%202024-01-05%20at%2012.04.28%E2%80%AFPM-94843d82-e23a-4027-9f8d-ed4e65ae204c.jpg) Comparto la solución por si alguien tiene una mejora:\<app-navbar />\
\
\
    \
  • \<fa-icon \[icon]="faTrello">\</fa-icon> \Board\ \
  • \
  • \<fa-icon \[icon]="faGopuram">\</fa-icon> \Templates\ \
  • \
  • \<fa-icon \[icon]="faHome">\</fa-icon> \Home\ \
  • \
\
\
Workspaces\
\
\<fa-icon \[icon]="faPlus">\</fa-icon>\
\
\
\
\
\<fa-icon \[icon]="faClock">\</fa-icon> \Recently viewed\ \
\<app-board color="sky-700">Demo\</app-board> \
\
\

YOUR WORKSPACES \

\
\
J \
\
\

Juan Daniel's workspace \

\
\
\<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> \
\
\
\<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> \
\
\
```js <app-navbar />
  • <fa-icon [icon]="faTrello"></fa-icon> Board
  • <fa-icon [icon]="faGopuram"></fa-icon> Templates
  • <fa-icon [icon]="faHome"></fa-icon> Home
Workspaces
<fa-icon [icon]="faPlus"></fa-icon>
<fa-icon [icon]="faClock"></fa-icon> Recently viewed
<app-board color="sky-700">Demo</app-board>

YOUR WORKSPACES

J

Juan Daniel's workspace

<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>
<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>
```
Yo logr\<app-navbar />\
\
\
    \
  • \<fa-icon \[icon]="faTrello">\</fa-icon> \Board\ \
  • \
  • \<fa-icon \[icon]="faGopuram">\</fa-icon> \Templates\ \
  • \
  • \<fa-icon \[icon]="faHome">\</fa-icon> \Home\ \
  • \
\
\
Workspaces\
\
\<fa-icon \[icon]="faPlus">\</fa-icon>\
\
\
\
\
\<fa-icon \[icon]="faClock">\</fa-icon> \Recently viewed\ \
\<app-board color="sky-700">Demo\</app-board> \
\
\

YOUR WORKSPACES \

\
\
J \
\
\

Juan Daniel's workspace \

\
\
\<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> \
\
\
\<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> \
\
\
![](https://static.platzi.com/media/user_upload/Screenshot%202024-01-05%20at%2012.01.56%E2%80%AFPM-2bd40fd5-4504-4321-9116-e63dd3dd07c1.jpg) Yo logré hacer esto con la maquetación. Comparto mi código, y si alguien tiene mejoras súper :) ```js <app-navbar />
  • <fa-icon [icon]="faTrello"></fa-icon> Board
  • <fa-icon [icon]="faGopuram"></fa-icon> Templates
  • <fa-icon [icon]="faHome"></fa-icon> Home
Workspaces
<fa-icon [icon]="faPlus"></fa-icon>
<fa-icon [icon]="faClock"></fa-icon> Recently viewed
<app-board color="sky-700">Demo</app-board>

YOUR WORKSPACES

J

Juan Daniel's workspace

<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>
<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>
```
Mi solucion! ![](https://static.platzi.com/media/user_upload/image-656f6814-2525-496f-843f-9601dbe50276.jpg) Este es el codigo que hice para poner la estrellita en la esquina de abajo: ```html
<h1 class="capitalize">{{ board.title }}
<button (click)="board.favorite = !board.favorite"> <fa-icon [icon]="board.favorite ? faStarSolid : faStar"></fa-icon> </button>
```
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'    }`

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