Comment ajouter font-awesome à un projet Angular 2 + CLI

Question

J'utilise Angular 2+ et Angular CLI.

Comment ajouter font-awesome à mon projet ?

Answer 1

Après la version finale d'Angular 2.0, la structure du projet Angular2 CLI a été modifiée - vous n'avez besoin d'aucun fichier vendeur, ni de system.js - seulement de webpack. Donc vous le faites :

1. npm install font-awesome --save

2. Dans le angular-cli.json localiser le fichier styles[] et ajoutez le répertoire de références de font-awesome ici, comme ci-dessous :

   "apps": [
       {
         "root": "src",
         "outDir": "dist",
         ....
         "styles": [
             "styles.css",
             "../node_modules/bootstrap/dist/css/bootstrap.css",
             "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
         ],
         ...
     }
     ]
   ],

   Dans les versions plus récentes d'Angular, utilisez l'option angular.json à la place, sans l'option ../ . Par exemple, utilisez "node_modules/font-awesome/css/font-awesome.css" .

3. Placez des icônes de police dans le fichier html de votre choix :

   <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

4. Arrêter l'application Ctrl + c puis relancez l'application en utilisant ng serve parce que les observateurs ne sont que pour le dossier src et angular-cli.json n'est pas observé pour les changements.

5. Profitez de vos superbes icônes !

Answer 2

Si vous utilisez SASS, vous pouvez l'installer via npm.

npm install font-awesome --save

et l'importer dans votre /src/styles.scss avec :

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

Astuce : Dans la mesure du possible, évitez de vous frotter aux angular-cli infrastructure. ;)

Answer 3

La réponse ci-dessus est un peu dépassée et il existe une méthode un peu plus simple.

1. installer via npm

   npm install font-awesome --save

2. dans votre style.css :

   @import '~font-awesome/css/font-awesome.css';

   ou dans votre style.scss :

   $fa-font-path: "~font-awesome/fonts"; @import '~font-awesome/scss/font-awesome';

   Edit : comme indiqué dans les commentaires, la ligne pour les polices doit être changée sur les nouvelles versions en $fa-font-path: "../../../node_modules/font-awesome/fonts";

en utilisant le ~ fera en sorte que sass regarde dans node_module . Il est préférable de procéder de cette manière plutôt que d'utiliser le chemin relatif. La raison est que si vous téléchargez un composant sur npm, et que vous importez font-awesome à l'intérieur du composant scss, il fonctionnera correctement avec ~ et non avec le chemin relatif qui sera faux à ce moment-là.

Cette méthode fonctionne pour tout module npm contenant du css. Elle fonctionne également pour scss. Cependant si vous importez des css dans votre styles.scss, cela ne fonctionnera pas (et peut-être vice versa). Voici pourquoi

Answer 4

L'utilisation de Font-Awesome dans les projets Angular comporte 3 volets

1. Installation
2. Stylisation (CSS/SCSS)
3. Utilisation dans Angular

Installation

Installer depuis NPM et sauvegarder dans votre package.json

npm install --save font-awesome

Styling Si vous utilisez le CSS

Insérez dans votre style.css

@import '~font-awesome/css/font-awesome.css';

Styling Si vous utilisez SCSS

Insérez dans votre style.scss

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Utilisation avec Angular 2.4+ 4+ simple

<i class="fa fa-area-chart"></i>

Utilisation avec Matériau angulaire

Dans votre app.module.ts, modifiez le constructeur pour qu'il utilise l'attribut MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

et ajouter MatIconModule à votre @NgModule importations

@NgModule({
  imports: [
    MatIconModule,
      ....
  ],
  declarations: ....
}

---

Maintenant, dans n'importe quel fichier de modèle, vous pouvez faire

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

Answer 5

Avec Angular2 RC5 et angular-cli 1.0.0-beta.11-webpack.8 vous pouvez y parvenir avec des importations css.

Il suffit d'installer Font Awesome :

npm install font-awesome --save

puis importez font-awesome dans l'un de vos fichiers de style configurés :

@import '../node_modules/font-awesome/css/font-awesome.css';

(les fichiers de style sont configurés dans angular-cli.json )