web-dev-qa-db-fra.com

FontAwesome Icons in Angular 6?

J'essaie d'utiliser des icônes de FontAwesome dans un projet Angular.
J'ai commencé avec le guide "Mise en route" que vous pouvez trouver ici: FontAwesome Angular Mise en route

Tout fonctionne bien, je peux voir l'icône faCoffee partout où je le mets dans mes modèles. Mais si j'essaie de le changer pour une autre icône (par exemple, l'icône "cocher"), rien ne s'affiche.

J'ai changé ma déclaration d'icône au niveau composant pour lui donner l'aspect suivant:

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

Modification du modèle html pour afficher ma nouvelle icône:

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

Ensuite, l’affectation de champ d’icône dans mon composant:

faCheck = faCheck;

Veuillez noter que je ne change essentiellement que le nom de l'icône à partir des exemples que j'ai testés et qui fonctionnent à l'adresse URL indiquée ci-dessus. Même si je vais à la définition de "faCheck" sur ma déclaration, je vois qu'elle est définie, alors je m'attends à ce qu'elle soit disponible.

La console Chrome affiche cette erreur lors du chargement de la page:

FontAwesome: icône introuvable. Il semble que vous ayez fourni un objet icône nul ou non défini à ce composant.

Première tentative d'utilisation de FontAwesome dans mes projets, des informations générales utiles sont les bienvenues.

UPDATE: Vous avez réussi à reconstruire la totalité de votre application. J'utilisais VS Code. Ainsi, lorsque vous enregistrez un fichier, il tente de recréer le dernier ensemble pour vous permettre de naviguer et de vérifier votre développement. Je ne sais pas ce qui se passe réellement avec l'état des composants en mémoire. Je pense que l'icône n'apparaissait pas à cause d'un désalignement des références.

angulartypescriptsvgiconsfont-awesome
8
mororo

tout ce que tu dois faire est:

1 - ajoutez ceci à votre 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 - utilisez votre icône comme:

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

Vous n'avez rien à ajouter dans votre component.ts ni dans votre app.module.ts ni installer quoi que ce soit avec du fil ou npm.

EDIT: Pour répondre à votre question, voici un stackblitz avec le faCheck utilisé comme mentionné dans le tutoriel, cela fonctionne pour moi: https: //stackblitz.com/edit/angular-4ebr9t

vérifiez si vous avez installé toutes les dépendances comme indiqué dans le tutoriel.

5
Observablerxjs

J'utilise Fontawesome dans ce projet angular6, consultez le package.json, cela vous aidera peut-être à résoudre votre problème: https://github.com/hamilton-lima/portfolio-web/blob/master /package.json

C'est ce que j'ai installé

    "@fortawesome/angular-fontawesome": "^0.1.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-brands-svg-icons": "^5.1.0",
    "@fortawesome/free-regular-svg-icons": "^5.1.0",
    "@fortawesome/free-solid-svg-icons": "^5.1.0",
    "angular-font-awesome": "^3.1.2",

Assurez-vous d'importer les icônes nécessaires dans la bibliothèque que vous utilisez.

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fas, far, fab);

Voir l'exemple ici: https://github.com/hamilton-lima/portfolio-web/blob/master/src/app/shared/shared.module.ts

4
hamilton.lima

1- Installez ce npm install @fortawesome/fontawesome-free

2- Ajouter ceci à angular.json (angular-cli.json)

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

3- Vous pouvez maintenant utiliser les polices avec <i> tag

2
ahmet aslan