J'utilise Angular 2+ et Angular CLI.

Comment ajouter une police géniale à mon projet?

Après la version finale d'Angular 2.0, la structure du projet CLI Angular2 a été modifiée - vous n'avez pas besoin de fichiers de fournisseur, pas de system.js - seulement du webpack. Vous faites donc:

1. npm install font-awesome --save

2. Dans le angular-cli.jsonfichier, localisez le styles[]tableau et ajoutez le répertoire de références 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 angular.jsonplutôt le fichier sans le ../. Par exemple, utilisez "node_modules/font-awesome/css/font-awesome.css".

3. Placez des icônes géniales dans n'importe quel fichier html que vous souhaitez:

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

4. Arrêtez l'application Ctrl+ cpuis réexécutez l'application à l'aide de ng servecar les observateurs ne concernent que le dossier src et angular-cli.json n'est pas observé pour les modifications.

5. Profitez de vos superbes icônes!

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

npm install font-awesome --save

et importez-le dans votre /src/styles.scssavec:

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

Conseil: Dans la mesure du possible, évitez de gâcher l' angular-cliinfrastructure. ;)

La première réponse est un peu dépassée et il existe un moyen 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';

   Modifier: comme indiqué dans les commentaires, la ligne des polices doit être modifiée sur les versions plus récentes en$fa-font-path: "../../../node_modules/font-awesome/fonts";

en utilisant le ~fera sass regarder node_module. Il vaut mieux le faire de cette façon qu'avec le chemin relatif. La raison en est que si vous téléchargez un composant sur npm et que vous importez font-awesome dans le composant scss, cela fonctionnera correctement avec ~ et non avec le chemin relatif qui sera incorrect à ce stade.

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

L'utilisation de Font-Awesome dans les projets angulaires se compose de 3 parties

1. Installation
2. Style (CSS / SCSS)
3. Utilisation en angulaire

Installation

Installez à partir de NPM et enregistrez-le dans votre package.json

npm install --save font-awesome

Styling Si vous utilisez CSS

Insérez dans votre style.css

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

Style 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 plain Angular 2.4+ 4+

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

Utilisation avec un matériau angulaire

Dans votre app.module.ts, modifiez le constructeur pour utiliser le MdIconRegistry

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

et ajouter MatIconModuleà vos @NgModuleimportations

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

}

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

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

MISE À JOUR février 2020: le package
fortawesome prend désormais en charge, ng addmais il n'est disponible que pour angular 9 :

ng add @fortawesome/angular-fontawesome

MISE À JOUR 8 octobre 2019:

Vous pouvez utiliser un nouveau package https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

Ajouter FontAwesomeModuleaux importations dans src/app/app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Liez l'icône à la propriété de votre composant src/app/app.component.ts:

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

Utilisez l'icône dans le modèle src/app/app.component.html:

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

RÉPONSE ORIGINALE:

Option 1:

Vous pouvez utiliser le module npm angular-font-awesome

npm install --save font-awesome angular-font-awesome

Importez le module:

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

Si vous utilisez la CLI angulaire, ajoutez le CSS génial de police aux styles à l'intérieur du angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

REMARQUE: si vous utilisez un préprocesseur SCSS, changez simplement le css pour scss

Exemple d'utilisation:

<fa name="cog" animation="spin"></fa>

Optoin 2:

Il y a une histoire officielle pour ça maintenant

Installez la bibliothèque font-awesome et ajoutez la dépendance à package.json

npm install --save font-awesome

Utilisation de CSS

Pour ajouter des icônes CSS Awesome Font à votre application ...

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

Utilisation de SASS

Créez un fichier vide _variables.scssdans src/.

Ajoutez ce qui suit à _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; En styles.scssajouter ce qui suit:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Tester

Exécutez ng serve pour exécuter votre application en mode développement et accédez à http: // localhost: 4200 .

Pour vérifier que Font Awesome a été correctement configuré, passez src/app/app.component.htmlà ce qui suit ...

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

Après avoir enregistré ce fichier, revenez au navigateur pour voir l'icône Font Awesome à côté du titre de l'application.

Il y a aussi une question connexe Angular CLI génère les fichiers de polices impressionnants de la racine dist car, par défaut, le cli angulaire génère les polices à la distracine, ce qui n'est d'ailleurs pas du tout un problème.

Avec Angular2RC5 etangular-cli 1.0.0-beta.11-webpack.8 vous pouvez y parvenir avec les importations CSS.

Installez simplement une police géniale:

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)

J'ai pensé que je mettrais ma résolution à cela car font-awesome est maintenant installé différemment selon leur documentation.

npm install --save-dev @fortawesome/fontawesome-free

Pourquoi il est fortuit m'échappe maintenant mais pensais que je m'en tiendrais à la version la plus récente plutôt que de retomber dans l'ancienne police géniale.

Ensuite, je l'ai importé dans mon scss

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

J'espère que cela t'aides

De nombreuses instructions ci-dessus fonctionnent, je suggère de les consulter. Cependant, quelque chose à noter:

L'utilisation <i class="fas fa-coffee"></i> n'a pas fonctionné dans mon projet (nouveau projet d'entraînement datant d'une semaine seulement) après l'installation et l'exemple d'icône ici a également été copié dans le presse-papiers de Font Awesome au cours de la semaine dernière.

Cela <i class="fa fa-coffee"></i> fonctionne . Si après avoir installé Font Awesome sur votre projet, cela ne fonctionne pas encore, je vous suggère de vérifier la classe sur votre icône pour supprimer le 's' pour voir si cela fonctionne alors.

Il y a beaucoup de bonnes réponses ici. Mais si vous les avez tous essayés et que vous obtenez toujours des carrés à la place des icônes impressionnantes, vérifiez vos règles CSS. Dans mon cas, j'avais la règle suivante:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

Et il remplace les polices fontawesome. Il suffit de remplacer le *sélecteur pour bodyrésoudre mon problème:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

Pour Angular 6,

Première npm install font-awesome --save

Ajouter node_modules/font-awesome/css/font-awesome.cssà angular.json .

N'oubliez pas de ne pas ajouter de points devant le node_modules/.

Cet article décrit comment intégrer Fontawesome 5 à Angular 6 (Angular 5 et les versions précédentes fonctionneront également, mais vous devez ensuite ajuster mes écrits)

Option 1: ajouter les fichiers css

Pro: Chaque icône sera incluse

Contra: chaque icône sera incluse (taille de l'application plus grande car toutes les polices sont incluses)

Ajoutez le package suivant:

npm install @fortawesome/fontawesome-free-webfonts

Ajoutez ensuite les lignes suivantes à votre fichier angular.json:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

Option 2: paquet angulaire

Pro: taille de l'application plus petite

Contra: Vous devez inclure chaque icône que vous souhaitez utiliser séparément

Utilisez le package FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Suivez simplement leur documentation pour ajouter les icônes. Ils utilisent les icônes svg, vous n'avez donc qu'à ajouter les svgs / icônes, vous utilisez vraiment.

Après quelques expérimentations, j'ai réussi à faire fonctionner les éléments suivants:

1. Installer avec npm:

   npm install font-awesome --save
   

2. ajouter au fichier angular-cli-build.js :

   vendorNpmFiles : [
       font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
   ]
   

3. ajouter à index.html

   <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
   

La clé était d'inclure les types de fichiers de polices dans le fichier angular-cli-build.js

. + (css | css.map | otf | eot | svg | ttf | woff | woff2)

La réponse acceptée est obsolète.

Pour angular 9 et Fontawesome 5

1. Installer FontAwesome

   npm install @ fortawesome / fontawesome-free --save

2. Enregistrez-le sur angular.json sous styles

   "node_modules/@fortawesome/fontawesome-free/css/all.min.css"

3. Utilisez-le sur votre application

Edit: j'utilise angulaire ^ 4.0.0 et Electron ^ 1.4.3

Si vous rencontrez des problèmes avec ElectronJS ou similaire et que vous avez une sorte d'erreur 404, une solution de contournement possible consiste à modifier votre webpack.config.js, en ajoutant (et en supposant que le module de noeud font-awesome est installé via npm ou dans le fichier package.json) :

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

Notez que la configuration du webpack que j'utilise a src/app/distcomme sortie, et, en dist, un assetsdossier est créé par webpack:

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

Donc, fondamentalement, ce qui se passe actuellement, c'est:

• Webpack copie le dossier des polices dans le dossier des actifs de développement.
• Webpack copie le dossier des actifs de développement dans le distdossier des actifs

Maintenant, lorsque le processus de génération sera terminé, l'application devra rechercher le .scssfichier et le dossier contenant les icônes, en les résolvant correctement. Pour les résoudre, je l'ai utilisé dans ma configuration webpack:

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

Enfin, dans le .scssdossier, j'importe la .scss de police-impressionnant et définir le chemin des polices, ce qui est, encore une fois, dist/assets/font-awesome/fonts. Le chemin estdist parce que dans mon webpack.config le output.path est défini commehelpers.root('src/app/dist');

Donc, dans app.scss:

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

Notez que, de cette manière, il définira le chemin de la police (utilisé plus tard dans le fichier .scss) et importera le fichier .scss en utilisant ~font-awesomepour résoudre le chemin de police génial dans node_modules.

C'est assez délicat, mais c'est le seul moyen que j'ai trouvé pour contourner le problème d'erreur 404 avec Electron.js

À partir de https://github.com/AngularClass/angular-starter , après avoir testé de nombreuses combinaisons de configurations différentes, voici ce que j'ai fait pour le faire fonctionner avec AoT.

Comme je l'ai déjà dit à plusieurs reprises, dans mon app.component.scss:

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

Puis dans webpack.config.js (en fait webpack.commong.js dans le pack de démarrage):

Dans la section plugins:

new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    { from: 'src/meta'},
    { from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),

Dans la section des règles:

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}

J'ai perdu plusieurs heures à essayer de faire fonctionner la dernière version de FontAwesome 5.2.0 avec AngularCLI 6.0.3 et Material Design. J'ai suivi les instructions d'installation de npm sur le site Web de FontAwesome

Leurs derniers documents vous demandent d'installer en utilisant les éléments suivants:

npm install @fortawesome/fontawesome-free

Après avoir perdu plusieurs heures, je l'ai finalement désinstallé et installé une police géniale à l'aide de la commande suivante (cela installe FontAwesome v4.7.0):

npm install font-awesome --save

Maintenant, ça fonctionne bien en utilisant:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

Font Awesome vous offre scalabledes icônes vectorielles qui peuvent être instantanément personnalisées: taille, couleur, ombre portée et tout ce qui peut être fait avec la puissance de CSS.

Créez un nouveau projet et accédez au projet.

ng new navaApp
cd navaApp

Installez la bibliothèque font-awesome et ajoutez la dépendance à package.json.

npm install --save font-awesome

Utilisation de CSS

Pour ajouter des icônes CSS Awesome Font à votre application ...

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

Utilisation de SASS

Créez un nouveau projet avec SASS:

ng new cli-app --style=scss

À utiliser avec un projet existant avec CSS:

Renommer src/styles.cssen src/styles.scss Changer angular.jsonpour rechercher au styles.scsslieu de css:

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

Assurez-vous de passer styles.cssà styles.scss.

Créez un fichier vide _variables.scssdans src/.

Ajoutez ce qui suit à _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts';

En styles.scssajouter ce qui suit:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Vous pouvez utiliser le package Angular Font Awesome

npm install --save font-awesome angular-font-awesome

puis importez dans votre module:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
     @NgModule({
       //...
      imports: [
        //...
        AngularFontAwesomeModule
      ],
      //...
    })
    export class AppModule { }

et importez le style dans le fichier angular-cli:

   "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
    ],

voir plus de détails sur le paquet dans la bibliothèque npm:

https://www.npmjs.com/package/angular-font-awesome

puis l'utiliser comme ceci:

<i class="fa fa-coffee"></i>

Pour utiliser Font Awesome 5 dans votre projet Angular, insérez le code ci-dessous dans le fichier src / index.html.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

Bonne chance!

Pour fontawesome 5.x +, le moyen le plus simple serait le suivant,

installer à l'aide du package npm: npm install --save @fortawesome/fontawesome-free

Dans votre styles.scssdossier:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

Remarque: si vous avez un _variables.scssfichier, il est plus approprié d'inclure l' $fa-font-pathintérieur et non dans le styles.scssfichier.

En utilisant LESS (pas SCSS) et Angular 2.4.0 et le Webpack standard (pas Angular CLI, les éléments suivants ont fonctionné pour moi:

npm install --save font-awesome

et (dans mon app.component.less):

@import "~font-awesome/less/font-awesome.less";

et bien sûr, vous pourriez avoir besoin de cet extrait évident et très intuitif (dans module.loaders dans webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

Le chargeur est là pour corriger les erreurs de type webpack

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

et l'expression régulière correspond à ces références svg (avec ou sans spécification de version). Selon la configuration de votre webpack, vous n'en aurez peut-être pas besoin ou vous aurez peut-être besoin d'autre chose.

Ajoutez-le dans votre package.json en tant que "devDependencies" font-awesome: "numéro de version"

Accédez à la commande d'invite de commande de type npm que vous avez configurée.

Je voulais utiliser Font Awesome 5+ et la plupart des réponses se concentrent sur les anciennes versions

Pour le nouveau Font Awesome 5+, le projet angulaire n'a pas encore été publié, donc si vous souhaitez utiliser les exemples mentionnés sur le site Web de font awesome, vous devez utiliser une solution de contournement. (en particulier les classes fas, far au lieu de la classe fa)

Je viens d'importer le cdn dans Font Awesome 5 dans mon styles.css. Juste ajouté ceci au cas où cela aiderait quelqu'un à trouver la réponse plus rapidement que moi :-)

Code dans Style.css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

Si, pour une raison quelconque, vous ne pouvez pas installer le package, jetez npm. Vous pouvez toujours modifier index.html et ajouter une police CSS impressionnante dans la tête. Et puis je l'ai utilisé dans le projet.

Pour l'utilisation de webpack2:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

au lieu de file-loader?name=/assets/fonts/[name].[ext]

Pour Angular 9 utilisant ng:

ng add @fortawesome/[email protected]

Regardez ici pour plus d'informations

Il existe maintenant plusieurs façons d'installer fontAwesome sur la CLI angulaire:

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

Référence ici: https://github.com/FortAwesome/angular-fontawesome