typescript - FontAwesome-ikoner i Angular 6?

Jag försöker använda ikoner från FontAwesome i ett Angular-projekt.
Jag började med guiden "Komma igång" som du kan hitta här: FontAwesome Angular Komma igång

Allt fungerar bra, jag kan se faCoffee-ikonen var som helst jag placerar den i mina mallar. Men om jag försöker byta till en annan ikon (t.ex. "check"-ikonen) visas ingenting.

Jag ändrade min ikondeklaration på komponentnivå för att få det att se ut så här:

import { faCheck } from '@fortawesome/free-solid-svg-icons';

Ändrade HTML-mallen för att visa min nya ikon:

<fa-icon [icon]="faCheck"></fa-icon>

Sedan ikonfältets tilldelning i min komponent:

faCheck = faCheck;

Vänligen notera att jag i princip endast ändrar namnet på ikonen från de exempel som jag testade och som fungerar på den URL jag angav ovan. Även om jag går till definitionen av "faCheck" i min deklaration, ser jag att den är definierad så jag förväntar mig att den ska vara tillgänglig.

Chrome-konsolen visar detta fel när sidan laddas:

FontAwesome: Kunde inte hitta ikonen. Det verkar som att du har tillhandahållit ett null- eller undefined-ikonobjekt till denna komponent.

Första försöket att använda FontAwesome i mina projekt, användbar allmän information är välkommen.

UPPDATERING: Fick det att fungera genom att bygga om hela min applikation. Jag använde VS Code, så när du sparar en fil försöker den skapa om den slutliga bundlen för att låta dig navigera och kontrollera din utveckling. Jag vet inte riktigt vad som händer med komponenternas minnesstatus. Jag tror att ikonen inte visades på grund av någon feljustering av referenser.

Svar #1

allt du behöver göra är:

1 - lägg till detta i din index.html:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">

2 - använd din ikon som:

<i class="fas fa-check"></i>

Du behöver inte lägga till något i din component.ts eller i din app.module.ts och inte heller installera något med yarn eller npm.

REDIGERA: För att svara på din fråga, här är en stackblitz med faCheck som används som nämnts i handledningen, det fungerar för mig: https://stackblitz.com/edit/angular-4ebr9t

kontrollera om du har installerat alla beroenden som anges i handledningen.

Svar #2

1- Installera detta npm install @fortawesome/fontawesome-free

2- Lägg till detta i angular.json (angular-cli.json)

"styles": [
    "...",
    "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
]

3- Nu kan du använda typsnitt med <i>-taggen

Relaterade artiklar