So fügen Sie dem Angular 2 + CLI-Projekt font-awesome hinzu

268

Ich verwende Angular 2+ und Angular CLI.

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

Nik
quelle
Ich habe das gleiche Problem. Es ist, als würden die Dateien von der CLI ignoriert und im Entwicklungsmodus nicht kopiert. Die Datei befindet sich jedoch im Verzeichnis / dist, wenn ein Build abgeschlossen ist.
Thibs
Ich verstehe nicht, warum wir font-awesome via npm hinzufügen müssen. Könnten wir nicht einfach auf font-awesome cdn verlinken? Was vermisse ich?
Rosdi Kasim
4
@RosdiKasim können Sie aus Ihrer Indexdatei auf die CDN verlinken. Es gibt Fälle, in denen Sie dies jedoch nicht möchten. Unternehmensprojekte erlauben möglicherweise keine externen Quellen. CDN könnte fallen; Bei der CLI-Aktualisierung muss möglicherweise die Datei index.html aktualisiert werden, damit Sie sicherstellen müssen, dass Ihre aktuellen Links nicht überschrieben werden. font-awesome könnte eine Abhängigkeit für eine andere npm lib sein; Sie möchten font-awesome für eine bestimmte Version sperren. Ihr Erstellungsprozess könnte davon abhängen ... (und so weiter, Sie haben die Idee) Am Ende, bis zu dem, wie Sie es einbringen möchten.
Nik
Ok, danke ... es sieht so aus, als würde mir nicht viel fehlen ... Ich möchte nur sicherstellen, dass ich die Vor- und Nachteile verstehe.
Rosdi Kasim
Siehe auch die offizielle Dokumentation zum Hinzufügen von JS oder CSS: angle.io/guide/…
Guillaume Husta

Antworten:

467

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!
AIon
quelle
3
Können Sie erklären, was addonstut? Ich sehe, dass es als "Konfiguration für installierte Addons von Drittanbietern reserviert" dokumentiert ist . , aber ich kann keine Behandlung im Angular-CLI-Code finden .
Arjan
1
Leider @Arjan & @bjorkblom - ich konnte keine Dokumente zu diesem Feld finden addons... Dies ist seit einiger Zeit in meiner Aufmerksamkeit. Ich werde meine Antwort aktualisieren, sobald ich etwas finde.
Am
3
@Rosdi Kasim Jan - das könnten Sie tun - aber in größeren Apps verwenden Sie im Allgemeinen keine CDs. Erstens, weil jemand sie hacken und Ihre App indirekt gefährden kann. Zweitens, weil es nicht nur fantastisch ist - Sie benötigen andere externe Bibliotheken wie Bootstrap, Dnd-Bibliotheken usw. - wenn Sie für jede von ihnen eine separate http-Anfrage an eine CDN haben, ist die Leistung schlecht. Stattdessen laden Sie mit npm herunter - und bündeln Ihren gesamten Code mithilfe von Webpack oder Ähnlichem in einer einzigen Datei. Minimieren und hässlich machen Sie das - und so können Sie Ihre App auf Mobilgeräten ausführen - wo die Ressourcen knapp sind.
Am
12
Hinweis: Die addonsEigenschaft wird nicht mehr verwendet. Es reicht aus, die font-awesome.cssDatei unter aufzunehmen styles. Siehe github.com/angular/angular-cli/blob/master/docs/documentation/…
0x2D9A3
2
Update: Mit Angular 6.0.0 wird der Dateiname von .angular-cli.json in angular.json geändert
Manoj Negi
123

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 . ;)

FDCastel
quelle
Es ist die beste Lösung imo. Funktioniert wie ein Zauber nach einem ng build && ng serve -w. Es ist einfacher und sicherer, scss Stil + Schriftarten erstellen zu lassen, als zu versuchen,
Angular
33
Beste Antwort. Kleinere Verbesserung: Verwenden Sie ~anstelle von ../node_modules/zB@import '~font-awesome/scss/font-awesome.scss';
m4js7er
5
funktioniert nicht für mich mit angular4 und scss. Ich kann die CSS sehen, aber nicht die Ikone
Aniruddha Das
Ich habe das gleiche Problem auf Angular4
Francesco
2
Verwenden Sie den .cssImport von ~font-awesome/css/font-awesome.min.cssund es funktioniert gut (Standard-Fa-Font-Pfad) für Angular4 / CLI
Tim
67

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

Ced
quelle
Immer noch der gleiche Fehler, nachdem Sie Ihre Schritte befolgt haben.
Indra257
Fehler beim Laden von .ttf-, woff- und woff2-Dateien
indra257
Ich benutze Cli 1.0. Zur Überprüfung habe ich eine Beispiel-App erstellt und nur font-awesome geladen und die App bereitgestellt. bekomme immer noch diesen Fehler.
Indra257
@ indra257 Ich musste $ fa-font-path hinzufügen: "../node_modules/font-awesome/fonts"; in styles.scss für obige Anweisungen zu arbeiten
Todilo
Ich habe keine style.scss-Datei in meinem Projekt. Muss ich nach dem Hinzufügen der Datei styles.scss weitere Schritte ausführen?
Indra257
51

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>
HammelUp
quelle
1
Haben Sie ein Problem mit der Bündelung der Schriftart-awesome. Ich denke, das Hauptproblem ist die Bündelung, wenn wir Cli verwenden. tff-, woff- und woff2-Dateien werden nicht gebündelt.
Indra257
Ich habe gerade eine Beispielanwendung erstellt und Ihre Schritte befolgt. Bündelte die App mit ng build. In der Konsole sehe ich immer noch Fehler beim Laden von woff- und woff2-Dateien nicht möglich
indra257
1
Das ist richtig. Es funktioniert perfekt mit ng servieren. Mit ng build funktioniert es einwandfrei, aber die Konsole zeigt, dass einige woff, woff2-Dateien nicht geladen werden können.
Indra257
Ich sehe nicht das gleiche Problem, daher gehe ich davon aus, dass etwas mit Ihren Build- / Konfigurationsdateien nicht stimmt. Ich schlage vor, Sie replizieren Ihr Problem mit einem Testfall und erstellen damit eine neue Frage.
Hammelfleisch
Ich habe eine leere App mit Angular-Cli erstellt und Font-Awesome hinzugefügt. Welche Dateien soll ich überprüfen ..
indra257
26

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.

kuncevic.dev
quelle
Wenn Sie Option 1 verwenden, entfernen Sie ../vor"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh
WARUM soll ich das neue Winkelpaket verwenden? Es scheint eher eine PITA zu sein, sie einzeln zu importieren.
MDave
1
Ich meine, dass npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconsin Ihrer Antwort nicht gleich npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesomein den Dokumenten ist, entschuldigen Sie, wenn ich etwas Offensichtliches vermisse.
User632716
1
@ User632716 OK hat gerade das fehlende Paket zum Befehl npm install hinzugefügt.
kuncevic.dev
1
Vielen Dank ... Ich habe nach Angular 9 + gesucht. UPDATE Februar 2020 ist die hilfreichste Sache, nachdem Sie 1 Tag verschwendet haben.
Tejashree
15

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)

Shusson
quelle
1
Sieht so aus, als würde versucht zu importieren, aber es wird eine Fehlermeldung angezeigt zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... Die Datei existiert tatsächlich, localhost:4200läuft aber nicht aus dem Stammverzeichnis dieses Ordners ... So packen Sie font-awesome in den localhost:4200Stammordner ...
microchip78
auch ich benutze [email protected]und Stil Dateikonfiguration in angular-cli.jsonfunktioniert nicht ...
microchip78
1
hmm das ist seltsam, vielleicht upgraden auf 1.0.0-beta.11-webpack.8?
Shusson
13

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

Nabel
quelle
5

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.

McKenna
quelle
4

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;
}
Kommerzieller Selbstmord
quelle
Vielen Dank, dass ich es jetzt für mich getan habe. Ich muss herausfinden, wie ich die Schriftarten zum
Laufen
@jgerstle, das Festlegen der Schriftart in bodysollte funktionieren. Stellen Sie sicher, dass Sie die Schriftart nicht an einer anderen Stelle überschreiben. Möglicherweise überschreiben Sie sie in h*oder pTags, wie wir es normalerweise tun.
Kommerzieller Selbstmord
Ja, etwas scheint es zu überschreiben, aber ich glaube nicht, dass es mein eigener Code ist. Ich denke, es sind möglicherweise nur die Chrome-Standardeinstellungen. Es ist seltsam, weil ich es auf! Wichtig gesetzt habe und es immer noch überschrieben zu werden scheint. Ich muss mehr darüber nachdenken.
Jgerstle
Ich habe es mit: nicht (.fa) bekommen, um den gleichen * Selektor zu behalten, aber nichts mit font-awesome
jgerstle
4

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/.

Alf Moh
quelle
2
Ich habe nur Quadrate für die Bilder, wenn ich das mache.
Gargoyle
Wie haben Sie die Quadrate entfernt? @ Gargoyle
AngularM
4

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.

Paul
quelle
Beachten Sie, dass Ihre Pfade mit @fortawesome beginnen. Beachten Sie das Wort 'FORT', nicht 'FONT'. Meine Installation tut dies auch. Weiß jemand was damit los ist?
Helzgate
Egal, anscheinend haben sie eine Umbenennungsstrukturierung im Gange. Siehe diese Github Post
Helzgate
@ Aniketkale was funktioniert nicht? Ich präsentierte zwei Optionen
Paul
3

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)

Nik
quelle
1
Nur ein Kopf hoch gibt es keine angular-cli-build.jsin der neuesten Webpack-Filiale
Shusson
Außerdem ist vendorNpmFiles im aktuellen Angular-CLI-Code nicht enthalten . Wenn ich Alons akzeptierte Antwort sehe, denke ich, dass dies veraltet ist?
Arjan
1
@Arjan yep, diese Antwort ist veraltet ... dies war für die Pre-Webpack-CLI. Alons Antwort ist die akzeptierte Antwort
Nik
3

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

Ron Michael
quelle
2

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

briosheje
quelle
2

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]'
}
user3582315
quelle
2

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>
Helzgate
quelle
2

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';
Mojtaba Nava
quelle
Es ist eine gute Frage. Es war schon immer eine Frage für mich
Seyed Ali Mahmoody
2

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>

Shmulik
quelle
2

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!

Cherma Ramalho
quelle
2

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.

Imtiaz Shakil Siddique
quelle
1

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.

dpnmn
quelle
1

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.

user1349544
quelle
Sie möchten Ihren 'Abhängigkeiten' eine Schriftart hinzufügen, nicht 'Entwicklungsabhängigkeiten', wie Sie sie in Ihrem endgültigen Build benötigen. Die obigen Anweisungen beantworten auch nicht, wie das Angular-Projekt es aufnimmt, sobald sie zu Ihrer package.json-Datei hinzugefügt werden.
Nik
1

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";
Ferdi Tolenaar
quelle
Ich habe es versucht. Funktioniert gut in lokalen, aber wenn ich versuche, es zu erstellen, gingen Symbole verloren.
Piyush Choudhary
1

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.

Semir Hodzic
quelle
1

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]

aristotll
quelle
1

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

Archil Labadze
quelle