si vous utilisez SASS, vous pouvez simplement 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";

Conseil: dans la mesure du possible, éviter de nuire à l'infrastructure angular-cli . ;)

la réponse du haut est un peu dépassée et il y a un moyen légèrement plus facile.

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 versions plus récentes à $fa-font-path: "../../../node_modules/font-awesome/fonts";

en utilisant le ~ fera Sass regarder dans 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 component sur npm, et que vous importez font-awesome à l'intérieur du component scss, alors il fonctionnera correctement avec ~ et non avec le chemin relatif qui sera erroné à ce point.

cette méthode fonctionne pour tout module npm qui contient des css. Il travaille pour scss. Toutefois si vous importez des css dans vos styles.scss, ça ne marchera pas (et peut-être vice-versa). Voici pourquoi

Il y a 3 pièces à l'aide de la Police Génial Angulaire des Projets

1. Installation
2. style (CSS / SCSS)
3. Usage en angle

Installation

Installer à partir d'MNP et enregistrez-le sur votre paquet.json

npm install --save font-awesome

style If en utilisant CSS

insérez dans votre style.css

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

style Si l'aide SCSS

insérez dans votre style.scss

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

Usage À Angle Uni 2.4+ 4+

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

utilisation avec angulaire Matière

Dans votre application.module.ts modifier le constructeur pour utiliser le 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 maintenant faire

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

avec Angular2 RC5 et angular-cli 1.0.0-beta.11-webpack.8 vous pouvez atteindre cet objectif avec CSS imports.

il suffit d'installer font awesome:

npm install font-awesome --save

et ensuite importer 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 angulaires-font-awesome npm module

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 Angular CLI, ajoutez la police-awesome CSS aux styles à l'intérieur de l'angular-cli.json

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

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

Exemple D'Utilisation:

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

Optoin 2:

Il y a un histoire officielle maintenant

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

npm install --save font-awesome

utilisant CSS

pour ajouter des icônes de police CSS impressionnantes à votre application...

// in .angular-cli.json

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

utilisant SASS

créer un fichier vide _variables.scss dans src/ .

ajouter ce qui suit à _variables.scss :

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

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

Test

exécuter ng servir pour exécuter votre application en mode développement, et naviguer à http://localhost:4200 .

pour vérifier que la police Awesome a été configurée correctement, changez src/app/app.composant.code html pour la suite...

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

après avoir sauvegardé 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 CLI angulaire produit les fichiers font-awesome la racine dist comme par défaut le cli angulaire affiche les polices à la racine dist , ce qui n'est d'ailleurs pas un problème du tout.

après quelques expérimentations j'ai réussi à obtenir le travail suivant:

1. Installer avec npm:

   npm install font-awesome --save
   

2. ajouter à angulaires-cli-construire.js fichier:

   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 fichier de police dans l'angular-cli-build.fichier js

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

Edit: je suis en utilisant angulaire ^4.0.0 et de l'Électron ^1.4.3

si vous avez des problèmes avec ElectronJS ou similaire et avez une sorte d'erreur 404, une solution possible est d'utiliser votre webpack.config.js , en ajoutant (et en supposant que vous avez le module font-awesome node installé par npm ou dans le paquet.fichier 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 src/app/dist comme sortie, 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 fonts vers le dossier dev assets.
• webpack copie le dossier dev assets vers le dossier dist assets folder

maintenant, quand le processus de construction sera terminé, l'application devra chercher le .scss fichier et le dossier contenant les icônes, les résoudre correctement. Pour les résoudre, j'ai utilisé ceci 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 fichier .scss , j'importe la police-awesome .scss et définir le chemin des polices, qui est, encore une fois, dist/assets/font-awesome/fonts . Le chemin est dist parce que dans mon webpack.config la sortie.le chemin est défini comme helpers.root('src/app/dist');

Si, dans app.scss :

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

Notez que, de cette façon, il définira le chemin de police (utilisé plus tard dans le .fichier scss) et importer le .fichier scss utilisant ~font-awesome pour résoudre la police-awesome path dans node_modules .

C'est assez délicat, mais c'est le seul moyen que j'ai trouvé pour contourner l'erreur 404 problème avec les Électrons.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 fois, 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 les règles de la section:

,
{
    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 avez tout essayé et toujours obtenir des carrés à la place des icônes fontawesome, 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 l'emporte sur les polices fontawesome. Je viens de remplacer le sélecteur * par body a résolu mon problème:

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

Pour Angle 6,

Première npm install font-awesome --save

ajouter node_modules/font-awesome/css/font-awesome.css à angulaire.json .

Se souvenir de et non de pour ajouter des points devant le node_modules/ .

ce post décrit comment intégrer Fontawesome 5 dans Angular 6 (Angular 5 et versions précédentes fonctionneront aussi, mais alors vous devez ajuster mes Écritures)

Option 1: Ajouter les fichiers css

Pro: Chaque icône sera incluse

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

ajouter le paquet suivant:

npm install @fortawesome/fontawesome-free-webfonts

ajoutez ensuite les lignes suivantes à votre angle.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: colis angulaire

Pro: Small app size

Contra: Vous devez inclure chaque icône que vous voulez utiliser separemment

utiliser le paquet angulaire 5 de FontAwesome:

npm install @fortawesome/angular-fontawesome

il suffit de suivre leur documentation pour ajouter les icônes. Ils utilisent les icônes svg, donc vous n'avez qu'à ajouter les SVG / icons, que vous utilisez vraiment.

en utilisant moins (pas SCSS) et Angular 2.4.0 et le Webpack standard (pas Angular CLI, ce qui suit a fonctionné pour moi:

npm install --save font-awesome

et (dans mon application.composant.moins):

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

et bien sûr, vous pouvez avoir besoin de cet extrait évident et très intuitif (dans le module.chargeurs 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 le regexp correspond aux svg-references (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.

je voulais utiliser la police impressionnant 5 + et la plupart des réponses se concentrent sur les versions plus anciennes

pour la nouvelle police Awesome 5+ Le projet angular n'a pas encore été publié, donc si vous voulez faire usage des exemples mentionnés sur le site font awesome atm vous devez utiliser un travail autour. cents cinquante et une million neuf cent vingt mille neuf cent vingt"

je viens d'importer le cdn pour faire Awesome 5 dans mes styles.CSS. Juste ajouté cela au cas où il aide quelqu'un à trouver la réponse plus vite que moi: -)

Code de Style.css

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

si, pour une raison quelconque, vous ne pouvez pas installer package throw npm. Vous pouvez toujours éditer index.html et ajouter de la police génial CSS dans l'en-tête. Et puis, peu utilisé dans le projet.

pour webpack2 utiliser:

{
 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 D'obtenir la dernière version de FontAwesome 5.2.0 en travaillant avec AngularCLI 6.0.3 et la conception des matériaux. J'ai suivi les instructions d'installation du npm sur le site de FontAwesome

leurs derniers docs vous indiquent d'installer en utilisant ce qui suit:

npm install @fortawesome/fontawesome-free

après avoir perdu plusieurs heures, je l'ai finalement désinstallé et j'ai installé font awesome en utilisant la commande suivante (ceci installe FontAwesome v4.7.0 0):

npm install font-awesome --save

maintenant il fonctionne très 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>

ajoutez-le dans votre paquet.json comme "devDependencies" font-awesome : "numéro de version"

aller à la commande invite type commande npm que vous avez configurée.