Hinzufügen von font-awesome zu Angular 2 + CLI-Projekt

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

npm install font-awesome --save

und importiere es in deinen /src/styles.scss mit:

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

Tipp: Vermeiden Sie nach Möglichkeit die angular-cli-Infrastruktur. ;)

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

1. durch npm installieren

   npm install font-awesome --save

2. in Ihrem style.css:

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

   oder in deinem style.scss:

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

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

mit ~ wird sass in node_module gesucht. Es ist besser, dies als mit dem relativen Pfad zu tun. Der Grund ist, dass, wenn Sie eine Komponente auf npm hochladen und Sie font-awesome in die Komponente scss importieren, sie 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 umfasst drei Teile

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

Installation

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

npm install --save font-awesome

Stylingbei Verwendung von CSS

Fügen Sie sie in Ihre style.css ein

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

Stylingbei Verwendung von SCSS

Fügen Sie sie in Ihre style.scss ein

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

Verwendung mit glattem Winkel 2.4 + 4+

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

Verwendung mit Winkelmaterial

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

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

und fügen Sie MatIconModule zu Ihren @NgModule-Importen hinzu

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

}

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

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

Mit Angular2 RC5 und angular-cli 1.0.0-beta.11-webpack.8 kö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 Styles:

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

(Style-Dateien werden in angular-cli.json konfiguriert)

Option 1:

Sie können das Modul angle-font-awesome npm verwenden

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

Importiere das Modul:

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

Wenn Sie Angular CLI verwenden, fügen Sie den Formatvorlagen in der Datei angular-cli.json das beeindruckende CSS hinzu

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

HINWEIS: Wenn Sie einen SCSS-Präprozessor verwenden, ändern Sie einfach die 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 Bibliothek mit den beeindruckenden Schriften und fügen Sie die Abhängigkeit zu package.json Hinzu.

npm install --save font-awesome

CSS verwenden

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.scss In src/.

Fügen Sie _variables.scss Folgendes hinzu:

$fa-font-path : '../node_modules/font-awesome/fonts'; Fügen Sie unter styles.scss Folgendes hinzu:

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

Test

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

Ändern Sie src/app/app.component.html in Folgendes, um zu überprüfen, ob Font Awesome korrekt eingerichtet wurde ...

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

Kehren Sie nach dem Speichern dieser Datei zum Browser zurück, und sehen Sie das Symbol „Font Awesome“ neben dem Titel der App.

Es gibt auch eine verwandte Frage . Angular CLI gibt die Font-fantastischen Font-Dateien als dist root aus. Standardmäßig angular cli gibt die Fonts als dist root aus Das ist übrigens überhaupt kein Thema.

Viele Anweisungen über der Arbeit, schlage ich vor, sich diese anzuschauen. Zu beachten ist jedoch Folgendes:

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

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

Nach ein paar Versuchen gelang es mir, die folgenden Funktionen zu erhalten:

1. Mit npm installieren:

   npm install font-awesome --save
   

2. zu angle-cli-build.js file 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 Dateitypen für Schriftarten in die Datei angle-cli-build.js aufzunehmen 

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

Edit: Ich verwende winklig ^ 4.0.0 und Electron ^ 1.4.3

Wenn Sie Probleme mit ElectronJS oder ähnlichem haben und eine Art Fehler 404 haben, besteht eine mögliche Problemumgehung darin, Ihren webpack.config.js zu bearbeiten, indem Sie Folgendes hinzufügen (und davon ausgehen, dass Sie das Modul "font-awesome node" über npm oder im System installiert haben package.json Datei):

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

Beachten Sie, dass die Webpack-Konfiguration, die ich verwende, src/app/dist als Ausgabe hat, und in dist ein assets-Ordner 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 ist das, was aktuell passiert:

• Webpack kopiert den Ordner "fonts" in den Ordner "dev assets".
• Webpack kopiert den dev-Assets-Ordner in den dist-Assets-Ordner

Wenn der Erstellungsprozess abgeschlossen ist, muss die Anwendung nach der .scss-Datei und dem Ordner mit den Symbolen suchen, um sie ordnungsgemäß aufzulösen. Um sie zu lösen, 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 importiere ich in der .scss-Datei den font-awesome .scss und definiere den Pfad der Schriftarten, der wiederum dist/assets/font-awesome/fonts ist. Der Pfad ist dist, da in meiner webpack.config der output.path auf helpers.root('src/app/dist'); gesetzt ist.

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 definiert wird (der später in der SCS-Datei verwendet wird), und die SCS-Datei mit ~font-awesome importiert wird, um den Pfad für die Schriftart in anode_modules aufzulösen.

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

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

Option 1: Hinzufügen der CSS-Dateien

Pro: Jedes Symbol wird aufgenommen

Contra: Jedes Symbol wird aufgenommen (größere App-Größe, 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 Ihrem 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

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

Verwenden Sie das Paket FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Folgen Sie einfach der Dokumentation, um die Symbole hinzuzufügen. Sie verwenden die svg-Icons, so dass Sie nur die svgs/icons hinzufügen müssen, die Sie wirklich verwenden.

Ausgehend von https://github.com/AngularClass/angular-starter , nachdem ich eine Menge verschiedener Konfigurationskombinationen getestet habe, habe ich Folgendes getan, um es mit AoT zu arbeiten.

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 (eigentlich 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 Regelabschnitt:

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

Hier gibt es viele gute Antworten. Wenn Sie jedoch alle ausprobiert haben und immer noch Quadrate statt fontawesome Symbole 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 Schriftarten. Das Ersetzen des *-Selektors in body hat mein Problem gelöst:

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

Für Winkel 6

Erster npm install font-awesome --save

Fügen Sie node_modules/font-awesome/css/font-awesome.css zuangle.jsonhinzu.

Denken Sie an nicht , um Punkte vor dem node_modules/ hinzuzufügen.

Ich dachte, ich würde meine Entschließung dazu einbringen, da font-awesome jetzt gemäß ihrer Dokumentation anders installiert wird.

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

Warum es erstaunlich ist, entgeht mir jetzt, aber ich dachte, ich würde bei der neuesten Version bleiben und nicht auf die alte Schrift zurückgreifen.

Dann habe ich es in meine SCSS importiert

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

Hoffe das hilft

Sie können das Paket Angular Font Awesome verwenden

npm install --save font-awesome angle-font-awesome

und dann in dein Modul importieren:

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

und importiere den Style in die 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

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

Ihre neuesten Dokumente weisen Sie an, Folgendes zu installieren:

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>

Das Font-Awesome-Paket auf NPM wurde seit 2016 nicht mehr aktualisiert.

Mein Problem war, dass ich ein Symbol verwendete, das in einer späteren Version von font-awesome hinzugefügt wurde.

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

npm install --save font-awesome

und (in meiner app.component.less): 

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

und natürlich benötigen Sie dieses offensichtliche und sehr 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 den svg-Verweisen (mit oder ohne Versionsangabe). Abhängig von Ihrem Webpack-Setup benötigen Sie es möglicherweise nicht oder Sie benötigen etwas anderes. 

Für webpack2 verwenden Sie:

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

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

Wenn Sie aus irgendeinem Grund das Paket nicht über npm installieren können. Sie können jederzeit index.html bearbeiten und dem Kopf fantastisches CSS hinzufügen. Und dann einfach im Projekt verwendet.

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

Wechseln Sie zu 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 das neue Font Awesome 5+ wurde das Winkelprojekt noch nicht veröffentlicht. Wenn Sie also die Beispiele verwenden möchten, die auf der Website "Font Awesome" atm erwähnt sind, müssen Sie eine Problemlösung verwenden. (vor allem die fas, far Klassen statt der fa Klasse)

Ich habe gerade die CD zu Font Awesome 5 in meine styles.css importiert. Nur hinzugefügt, falls jemand hilft, die Antwort schneller zu finden als ich :-)

Code in Style.css

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