Ich verwende Angular 2+ und Angular CLI.

Wie füge ich meinem Projekt font-awesome hinzu?

Nach der endgültigen Version von Angular 2.0 wurde die Struktur des Angular2 CLI-Projekts geändert - Sie benötigen keine Herstellerdateien, keine system.js - nur ein Webpack. Also tust du es:

1. npm install font-awesome --save

2. angular-cli.jsonSuchen Sie in der Datei das styles[]Array und fügen Sie hier ein Verzeichnis mit fantastischen Referenzen hinzu, wie unten:

   "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!?
         ],
         ...
     }
     ]
   ],
   

   Verwenden Sie in neueren Versionen von Angular angular.jsonstattdessen die Datei ohne die ../. Verwenden Sie zum Beispiel "node_modules/font-awesome/css/font-awesome.css".

3. Platzieren Sie einige fantastische Symbole in jeder gewünschten HTML-Datei:

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

4. Stoppen Sie die Anwendung Ctrl+ cund führen Sie die App mit erneut aus, ng serveda die Watcher nur für den Ordner src bestimmt sind und angle-cli.json bei Änderungen nicht beobachtet wird.

5. Viel Spaß mit deinen tollen Ikonen!

Wenn Sie SASS verwenden, können Sie es einfach über npm installieren

npm install font-awesome --save

und importiere es in dein /src/styles.scssmit:

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

Tipp: Vermeiden Sie nach Möglichkeit, sich mit der angular-cliInfrastruktur herumzuschlagen . ;)

Die Top-Antwort ist etwas veraltet und es gibt einen etwas einfacheren Weg.

1. Installation über npm

   npm install font-awesome --save

2. in Ihrem style.css:

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

   oder in Ihrem style.scss:

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

   Bearbeiten: Wie in den Kommentaren angegeben, muss die Zeile für Schriftarten in neueren Versionen auf geändert werden$fa-font-path: "../../../node_modules/font-awesome/fonts";

mit dem ~wird sass untersuchen node_module. Es ist besser, dies auf diese Weise zu tun als mit dem relativen Pfad. Der Grund dafür ist, dass wenn Sie eine Komponente auf npm hochladen und font-awesome in die Komponente scss importieren, diese ordnungsgemäß mit ~ und nicht mit dem relativen Pfad funktioniert, der an diesem Punkt falsch ist.

Diese Methode funktioniert für jedes npm-Modul, das CSS enthält. Es funktioniert auch für scss. Allerdings , wenn Sie CSS in Ihre styles.scss importieren wird es nicht funktionieren (und vielleicht auch umgekehrt). Hier ist warum

Die Verwendung von Font-Awesome in Winkelprojekten besteht aus 3 Teilen

1. Installation
2. Styling (CSS / SCSS)
3. Verwendung in Angular

Installation

Installieren Sie von NPM und speichern Sie es in Ihrer package.json

npm install --save font-awesome

Styling Bei Verwendung von CSS

Fügen Sie in Ihre style.css ein

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

Styling Bei Verwendung von SCSS

Fügen Sie in Ihre style.scss ein

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

Verwendung mit einfachem Winkel 2.4+ 4+

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

Verwendung mit eckigem Material

Ändern Sie in Ihrer app.module.ts den Konstruktor, um die zu verwenden MdIconRegistry

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

und MatIconModulezu Ihren @NgModuleImporten hinzufügen

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

}}

Jetzt in jeder Vorlagendatei, die Sie jetzt tun können

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

UPDATE Feb 2020:
Fortawesome Paket unterstützt jetzt, ng addaber es ist nur für Winkel 9 verfügbar :

ng add @fortawesome/angular-fontawesome

UPDATE 8. Oktober 2019:

Sie können ein neues Paket https://www.npmjs.com/package/@fortawesome/angular-fontawesome verwenden

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

In FontAwesomeModuleder Einfuhr in 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 { }

Binden Sie das Symbol an die Eigenschaft in Ihrer Komponente 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;
}

Verwenden Sie das Symbol in der Vorlage src/app/app.component.html:

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

URSPRÜNGLICHE ANTWORT:

Option 1:

Sie können das Angular-Font-Awesome- Npm-Modul verwenden

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

Importieren Sie das Modul:

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

Wenn Sie Angular CLI verwenden, fügen Sie den Schriftarten in der Datei angle-cli.json das schreibgeschützte CSS hinzu

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

HINWEIS: Wenn Sie einen SCSS-Präprozessor verwenden, ändern Sie einfach das CSS für SCSS

Beispiel Verwendung:

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

Optoin 2:

Dafür gibt es jetzt eine offizielle Geschichte

Installieren Sie die font-awesome-Bibliothek und fügen Sie die Abhängigkeit hinzu package.json

npm install --save font-awesome

Verwenden von CSS

So fügen Sie Ihrer App Font Awesome CSS-Symbole hinzu ...

// in .angular-cli.json

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

Verwenden von SASS

Erstellen Sie eine leere Datei _variables.scssin src/.

Fügen Sie Folgendes hinzu _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; In styles.scssfügen Sie die folgende:

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

Prüfung

Führen Sie ng aus, um Ihre Anwendung im Entwicklungsmodus auszuführen, und navigieren Sie zu http: // localhost: 4200 .

Um zu überprüfen, ob Font Awesome korrekt eingerichtet wurde, ändern Sie src/app/app.component.htmlFolgendes ...

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

Kehren Sie nach dem Speichern dieser Datei zum Browser zurück, um das Symbol Font Awesome neben dem App-Titel anzuzeigen.

Es gibt auch eine verwandte Frage: Angular CLI gibt die font-awesome-Schriftdateien im dist-Stammverzeichnis aus, da Angular CLI standardmäßig die Schriftarten im distStammverzeichnis ausgibt , was übrigens überhaupt kein Problem darstellt.

Mit Angular2RC5 angular-cli 1.0.0-beta.11-webpack.8können Sie dies mit CSS-Importen erreichen.

Installieren Sie einfach font awesome:

npm install font-awesome --save

und importieren Sie dann font-awesome in eine Ihrer konfigurierten Stildateien:

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

(Stildateien werden in konfiguriert angular-cli.json)

Ich dachte, ich würde meine Lösung dafür einbringen, da font-awesome jetzt entsprechend ihrer Dokumentation anders installiert ist.

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

Warum es so großartig ist, entgeht mir jetzt, aber ich dachte, ich würde bei der neuesten Version bleiben, anstatt auf die alte Schrift zurückzugreifen.

Dann habe ich es in mein scss importiert

$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";

Hoffe das hilft

Viele Anweisungen über Arbeit funktionieren, ich schlage vor, diese zu betrachten. Beachten Sie jedoch Folgendes:

Die Verwendung <i class="fas fa-coffee"></i> hat in meinem Projekt (neues Übungsprojekt nur eine Woche alt) nach der Installation nicht funktioniert, und das Beispielsymbol hier wurde in der letzten Woche auch von Font Awesome in die Zwischenablage kopiert.

Das <i class="fa fa-coffee"></i> funktioniert . Wenn es nach der Installation von Font Awesome in Ihrem Projekt noch nicht funktioniert, empfehle ich, die Klasse auf Ihrem Symbol zu überprüfen, um die 's' zu entfernen und festzustellen, ob es dann funktioniert.

Hier gibt es viele gute Antworten. Wenn Sie jedoch alle ausprobiert haben und stattdessen Quadrate anstelle von fontawesome Symbolen erhalten, überprüfen Sie Ihre CSS-Regeln. In meinem Fall hatte ich folgende Regel:

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

Und es überschreibt fontawesome Schriften. Ich habe nur den *Selektor ausgetauscht, um bodymein Problem zu lösen:

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

Für Winkel 6

Zuerst npm install font-awesome --save

In node_modules/font-awesome/css/font-awesome.csszu angular.json .

Denken Sie daran , nicht alle Punkte vor dem hinzuzufügen node_modules/.

In diesem Beitrag wird beschrieben, wie Sie Fontawesome 5 in Angular 6 integrieren (Angular 5 und frühere Versionen funktionieren ebenfalls, aber dann müssen Sie meine Schriften anpassen).

Option 1: Fügen Sie die CSS-Dateien hinzu

Pro: Jedes Symbol wird enthalten sein

Contra: Jedes Symbol wird enthalten sein (größere App, da alle Schriftarten enthalten sind)

Fügen Sie das folgende Paket hinzu:

npm install @fortawesome/fontawesome-free-webfonts

Fügen Sie anschließend die folgenden Zeilen zu Ihrer angle.json hinzu:

"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: Winkelpaket

Pro: Kleinere App-Größe

Gegen: Sie müssen jedes Symbol, das Sie verwenden möchten, separat einfügen

Verwenden Sie das FontAwesome 5 Angular-Paket:

npm install @fortawesome/angular-fontawesome

Folgen Sie einfach der Dokumentation, um die Symbole hinzuzufügen. Sie verwenden die SVG-Symbole, sodass Sie nur die SVGs / Symbole hinzufügen müssen, die Sie wirklich verwenden.

Nach einigen Experimenten gelang es mir, Folgendes zum Laufen zu bringen:

1. Mit npm installieren:

   npm install font-awesome --save
   

2. zur Datei angular-cli-build.js hinzufügen :

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

3. zu index.html hinzufügen

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

Der Schlüssel bestand darin, die Schriftartdateitypen in die Datei angle-cli-build.js aufzunehmen

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

Akzeptierte Antwort ist veraltet.

Für Winkel 9 und Fontawesome 5

1. Installieren Sie FontAwesome

   npm install @ fortawesome / fontawesome-free --save

2. Registrieren Sie es auf angle.json unter Styles

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

3. Verwenden Sie es in Ihrer Anwendung

Edit: Ich benutze Angular ^ 4.0.0 und Electron ^ 1.4.3

Wenn Sie Probleme mit ElectronJS oder ähnlichem haben und eine Art 404-Fehler haben, besteht eine mögliche Problemumgehung darin, Ihr Problem webpack.config.jsdurch Hinzufügen (und unter der Annahme, dass Sie das font-awesome-Knotenmodul über npm oder in der Datei package.json installiert haben) zu beheben. ::

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

Beachten Sie, dass die von mir verwendete Webpack-Konfiguration src/app/distals Ausgabe dient und in dist einen assetsOrdner von webpack erstellt wird:

// 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'
},

Im Grunde passiert also Folgendes:

• Webpack kopiert den Fonts-Ordner in den Dev-Assets-Ordner.
• Webpack kopiert den Dev-Assets-Ordner in den distAssets-Ordner

Wenn der Erstellungsprozess abgeschlossen ist, muss die Anwendung nach der .scssDatei und dem Ordner mit den Symbolen suchen , um sie ordnungsgemäß aufzulösen. Um sie zu beheben, habe ich dies in meiner Webpack-Konfiguration verwendet:

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

Schließlich .scssimportiere ich in der Datei die font-awesome .scss und definiere den Pfad der Schriften, was wiederum ist dist/assets/font-awesome/fonts. Der Pfad ist, distweil in meiner webpack.config der output.path als festgelegt isthelpers.root('src/app/dist');

Also, in app.scss:

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

Beachten Sie, dass auf diese Weise der Schriftpfad (der später in der .scss-Datei verwendet wird) definiert und die .scss-Datei importiert wird, mit der der Pfad ~font-awesomefür die Schriftart in aufgelöst wird node_modules.

Dies ist ziemlich schwierig, aber es ist die einzige Möglichkeit, das 404-Fehlerproblem mit Electron.js zu umgehen

Ausgehend von https://github.com/AngularClass/angular-starter , nachdem ich viele verschiedene Konfigurationskombinationen getestet habe, habe ich Folgendes getan, um es mit AoT zum Laufen zu bringen.

Wie schon oft gesagt, in meinem app.component.scss:

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

Dann in webpack.config.js (tatsächlich webpack.commong.js im Starter Pack):

Im Plugins-Bereich:

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

Im Regelbereich:

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

Ich habe mehrere Stunden damit verbracht, die neueste Version von FontAwesome 5.2.0 mit AngularCLI 6.0.3 und Material Design zum Laufen zu bringen. Ich habe die Installationsanweisungen für npm auf der FontAwesome-Website befolgt

Die neuesten Dokumente weisen Sie an, die Installation folgendermaßen durchzuführen:

npm install @fortawesome/fontawesome-free

Nachdem ich einige Stunden verschwendet hatte, deinstallierte ich es schließlich und installierte font awesome mit dem folgenden Befehl (dies installiert FontAwesome v4.7.0):

npm install font-awesome --save

Jetzt funktioniert es gut mit:

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

Mit Font Awesome erhalten Sie scalableVektorsymbole, die sofort angepasst werden können - Größe, Farbe, Schlagschatten und alles, was mit der Kraft von getan werden kann CSS.

Erstellen Sie ein neues Projekt und navigieren Sie in das Projekt.

ng new navaApp
cd navaApp

Installieren Sie die font-awesome-Bibliothek und fügen Sie die Abhängigkeit hinzu package.json.

npm install --save font-awesome

Verwenden von CSS

So fügen Sie Ihrer App Font Awesome CSS-Symbole hinzu ...

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

Verwenden von SASS

Erstellen Sie ein neues Projekt mit SASS:

ng new cli-app --style=scss

Verwendung mit vorhandenem Projekt mit CSS:

Umbenennen src/styles.cssin src/styles.scss Ändernangular.json , um danach zu suchen, styles.scssanstatt css:

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

Achten Sie darauf , sich ändern styles.csszu styles.scss.

Erstellen Sie eine leere Datei _variables.scssin src/.

Fügen Sie Folgendes hinzu: _variables.scss:

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

In styles.scssfügen Sie die folgende:

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

Sie können das Angular Font Awesome-Paket verwenden

npm install --save font-awesome eckig-font-awesome

und dann in Ihr Modul importieren:

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

und importieren Sie den Stil in eine Angular-Cli-Datei:

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

Weitere Details zum Paket finden Sie in der npm-Bibliothek:

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

und dann benutze es so:

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

Um Font Awesome 5 in Ihrem Angular-Projekt zu verwenden, fügen Sie den folgenden Code in die Datei src / index.html ein.

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

Viel Glück!

Für fontawesome 5.x + wäre der einfachste Weg der folgende:

Installation mit dem npm-Paket: npm install --save @fortawesome/fontawesome-free

In Ihrer styles.scssDatei enthalten:

$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';

Hinweis: Wenn Sie eine _variables.scssDatei haben , ist es besser, die $fa-font-pathdarin enthaltene und nicht die styles.scssDatei einzuschließen.

Mit LESS (nicht SCSS) und Angular 2.4.0 und Standard-Webpack (nicht Angular CLI) hat Folgendes für mich funktioniert:

npm install --save font-awesome

und (in meiner app.component.less):

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

und natürlich benötigen Sie möglicherweise dieses offensichtliche und äußerst intuitive Snippet (in module.loaders in webpack.conf).

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

Der Loader ist dazu da, Webpack-Fehler dieser Art zu beheben

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

und der reguläre Ausdruck entspricht diesen SVG-Referenzen (mit oder ohne Versionsspezifikation). Abhängig von Ihrem Webpack-Setup benötigen Sie es möglicherweise nicht oder etwas anderes.

Fügen Sie es in Ihrer package.json als "devDependencies" hinzu. Font-awesome: "Versionsnummer"

Gehen Sie zur Eingabeaufforderung und geben Sie den von Ihnen konfigurierten Befehl npm ein.

Ich wollte Font Awesome 5+ verwenden und die meisten Antworten konzentrieren sich auf ältere Versionen

Für die neue Font Awesome 5+ wurde das eckige Projekt noch nicht veröffentlicht. Wenn Sie also die auf der Font Awesome-Website atm genannten Beispiele verwenden möchten, müssen Sie eine Problemumgehung verwenden. (besonders die fas, far Klassen anstelle der fa Klasse)

Ich habe gerade die CDN in Font Awesome 5 in meiner styles.css importiert. Fügte dies einfach hinzu, falls es jemandem hilft, die Antwort schneller zu finden als ich :-)

Code in Style.css

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

Wenn Sie aus irgendeinem Grund das Paket nicht installieren können, werfen Sie npm. Sie können die Datei index.html jederzeit bearbeiten und dem Kopf ein beeindruckendes CSS hinzufügen. Und dann einfach im Projekt verwendet.

Für webpack2 verwenden Sie:

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

anstatt file-loader?name=/assets/fonts/[name].[ext]

Für Angular 9 mit ng:

ng add @fortawesome/[email protected]

Weitere Informationen finden Sie hier

Jetzt gibt es nur wenige Möglichkeiten, fontAwesome auf Angular CLI zu installieren:

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

Referenz hier: https://github.com/FortAwesome/angular-fontawesome