Après la version finale de Angular 2.0, la structure du projet Angular2 CLI a été modifiée – vous n’avez pas besoin de fichiers de fournisseurs, pas de pack de Web pour system.js. Donc vous faites:

1. npm install font-awesome --save

2. Dans le fichier angular-cli.json, localisez le tableau styles[] et ajoutez ici le répertoire font-awesome references, comme ci-dessous:

     "applications": [
              {
                 "root": "src",
                 "outDir": "dist",
                 ....
                 "modes": [
                    "styles.css",
                    "../node_modules/bootstrap/dist/css/bootstrap.css",
                    "../node_modules/font-awesome/css/font-awesome.css" // -lors de webpack, un élément css de lien sera automatiquement créé !?
                 ],
                 ...
             }
           ]
   
    ], 

3. Placez des icons de font-awesome dans n’importe quel fichier HTML que vous voulez:

4. Arrêtez l’application Ctrl + c puis réexécutez l’application en utilisant ng serve car les observateurs sont uniquement pour le dossier src et angular-cli.json n’est pas observé pour les modifications.

5. Profitez de vos superbes icons!

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

 npm install font-awesome --save 

et importez-le dans votre /src/styles.scss avec:

 $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 jouer avec angular-cli infrastructure angular-cli . 😉

La meilleure réponse est un peu dépassée et il existe un moyen légèrement plus simple.

1. installer à travers 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 fonts doit être modifiée sur les nouvelles versions à $fa-font-path: "../../../node_modules/font-awesome/fonts";

en utilisant le ~ fera sass regarder dans node_module . Il est préférable de 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, il fonctionnera correctement avec ~ et non avec le chemin relatif qui sera incorrect à ce stade.

Cette méthode fonctionne pour tout module npm contenant css. Cela fonctionne aussi pour scss. Cependant, si vous importez css dans vos styles.scss, cela ne fonctionnera pas (et peut-être inversement). Voici pourquoi

Il y a 3 parties à utiliser Font-Awesome dans les projets angulars

1. Installation
2. Styling (CSS / SCSS)
3. Utilisation en angular

Installation

Installer à partir de NPM et enregistrer 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'; 

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+

Utilisation avec un matériau angular

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

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

et ajoutez MatIconModule à vos importations @NgModule

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

}

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

Avec Angular2 RC5 et angular-cli 1.0.0-beta.11-webpack.8 vous pouvez réaliser cela avec les importations CSS.

Il suffit d’installer la police génial:

 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 )

Option 1:

Vous pouvez utiliser le module npm de fonts angulars

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

Importer le module:

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

Si vous utilisez une interface CLI angular, ajoutez le code CSS de police-awesome aux styles situés dans le fichier angular-cli.json.

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

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

Exemple d’utilisation:

Optoin 2:

Il y a une histoire officielle pour cela maintenant

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

npm install --save font-awesome

En utilisant CSS

Pour append des icons CSS Font Awesome à votre application …

 // in .angular-cli.json "styles": [ "styles.css", "../node_modules/font-awesome/css/font-awesome.css" ] 

Utiliser SASS

Créez un fichier vide _variables.scss dans src/ .

Ajoutez ce qui suit à _variables.scss :

$fa-font-path : '../node_modules/font-awesome/fonts'; Dans styles.scss ajoutez ce qui suit:

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

Tester

Exécutez ng 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é, remplacez src / app / app.component.html par le texte suivant …

 
 {{title}}   

Après avoir enregistré ce fichier, retournez dans le navigateur pour afficher l’icône Font Awesome en regard du titre de l’application.

Il y a aussi une question connexe. CLI angular génère les fichiers de fonts de font-awesome de la racine dist, car par défaut, les valeurs angulars cli produisent les fonts dans la racine dist , ce qui n’est pas du tout un problème.

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. append à index.html

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

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

Edit: J’utilise angular ^ 4.0.0 et Electron ^ 1.4.3

Si vous avez des problèmes avec ElectronJS ou similaire et que vous avez une sorte d’erreur 404, une solution possible est d’éditer votre webpack.config.js , en ajoutant (et en supposant que vous avez le module de nœud font-awesome installé par 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 webpack que j’utilise a comme sortie src/app/dist et, dans dist, un dossier assets 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 est:

• Webpack copie le dossier des fonts dans le dossier des actifs de développement.
• Webpack copie le dossier dev assets dans le dossier dist assets

Maintenant, lorsque le processus de construction sera terminé, l’application devra chercher le fichier .scss et le dossier contenant les icons pour les résoudre correctement. Pour les résoudre, j’ai utilisé ceci dans ma config de webpack:

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

Enfin, dans le fichier .scss , .scss fichier .scss font-awesome et définit le chemin des fonts, ce qui correspond, encore une fois, à dist/assets/font-awesome/fonts . Le chemin est dist car dans mon webpack.config, le fichier output.path est défini comme helpers.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-awesome pour résoudre le chemin de font-awesome dans node_modules .

C’est assez compliqué, 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 déjà dit à plusieurs resockets, dans mon app.component.scss :

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

Ensuite, 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]' } 

Il y a beaucoup de bonnes réponses ici. Mais si vous les avez toutes essayées et que vous obtenez toujours des carrés à la place des icons géniales, 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 fonts fontawesome. Le simple remplacement du sélecteur par le body résolu mon problème:

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

Pour angular 6,

Première npm install font-awesome --save

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

N’oubliez pas de ne pas append de points devant les node_modules/ .

Cet article décrit comment intégrer Fontawesome 5 dans Angular 6 (Angular 5 et les versions précédentes fonctionneront également, mais vous devrez alors ajuster mes écritures)

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 fonts sont incluses)

Ajoutez le package suivant:

 npm install @fortawesome/fontawesome-free-webfonts 

Ajoutez ensuite les lignes suivantes à votre 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 angular

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 append les icons. Ils utilisent les icons svg, il suffit donc d’append les icons / svgs, que vous utilisez vraiment.

En utilisant LESS (pas SCSS) et Angular 2.4.0 et Webpack standard (pas de CLI angular, les suivantes 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 aurez besoin de cet extrait évident et 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 Webpack du genre

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

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

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

Pour la nouvelle police Awesome 5+, le projet angular n’a pas encore été publié, donc si vous souhaitez utiliser les exemples mentionnés sur le site Web de la police, vous devez utiliser une solution de contournement. (surtout les fas, les classes lointaines au lieu de la classe fa)

Je viens juste d’importer le cdn dans Font Awesome 5 dans mes styles.css. Je viens d’append 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 paquet, jetez npm. Vous pouvez toujours éditer index.html et append une police CSS impressionnante dans la tête. Et ensuite, je l’ai juste 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]

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 npm sur le site FontAwesome

Leurs derniers documents vous invitent à installer en utilisant ce qui suit:

 npm install @fortawesome/fontawesome-free 

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

 npm install font-awesome --save 

Maintenant, ça marche bien en utilisant:

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

Ajoutez-le dans votre package.json comme “devDependencies” font-awesome: “numéro de version”

Accédez à l’invite de commande, tapez la commande npm que vous avez configurée.