Sto usando Angular 2+ e Angular CLI.

Come aggiungo font-awesome al mio progetto?

Dopo la versione finale di Angular 2.0, la struttura del progetto CLI di Angular2 è stata modificata - non è necessario alcun file del fornitore, né system.js - solo webpack. Quindi fai:

1. npm install font-awesome --save

2. Nel angular-cli.jsonfile individuare l' styles[]array e aggiungere la directory dei riferimenti font-awesome qui, come sotto:

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

   Nelle versioni più recenti di Angular, utilizzare angular.jsoninvece il file, senza il ../. Ad esempio, utilizzare "node_modules/font-awesome/css/font-awesome.css".

3. Inserisci alcune icone fantastiche per i font in qualsiasi file html che desideri:

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

4. Arresta l'applicazione Ctrl+ cquindi esegui di nuovo l'app utilizzando ng serveperché gli osservatori sono solo per la cartella src e angular-cli.json non viene osservato per le modifiche.

5. Goditi le tue fantastiche icone!

Se stai usando SASS, puoi semplicemente installarlo tramite npm

npm install font-awesome --save

e importalo nel tuo /src/styles.scsscon:

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

Suggerimento: quando possibile, evitare di pasticciare con l' angular-cliinfrastruttura. ;)

La risposta migliore è un po 'datata e c'è un modo leggermente più semplice.

1. installare tramite npm

   npm install font-awesome --save

2. nel tuo style.css:

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

   o nel tuo style.scss:

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

   Modifica: come indicato nei commenti, la riga per i caratteri deve essere modificata nelle versioni più recenti$fa-font-path: "../../../node_modules/font-awesome/fonts";

usando il ~far si che sass guardi dentro node_module. È meglio farlo in questo modo che con il relativo percorso. Il motivo è che se carichi un componente su npm e importi font-awesome all'interno del componente scss, allora funzionerà correttamente con ~ e non con il relativo percorso che sarà sbagliato in quel punto.

Questo metodo funziona per qualsiasi modulo npm che contiene CSS. Funziona anche per scss. Tuttavia, se stai importando css nel tuo styles.scss non funzionerà (e forse viceversa). Ecco perché

Ci sono 3 parti nell'uso di Font-Awesome in Angular Projects

1. Installazione
2. Styling (CSS / SCSS)
3. Uso in angolare

Installazione

Installa da NPM e salva su package.json

npm install --save font-awesome

Stile Se si utilizza CSS

Inserisci nel tuo style.css

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

Stile Se si utilizza SCSS

Inserisci nel tuo style.scss

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

Utilizzo con semplice Angular 2.4+ 4+

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

Utilizzo con materiale angolare

In app.module.ts modifica il costruttore per utilizzare il MdIconRegistry

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

e aggiungi MatIconModulealle tue @NgModuleimportazioni

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

}

Ora puoi eseguire qualsiasi file modello

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

AGGIORNAMENTO Febbraio 2020: il pacchetto
fortawesome ora supporta ng addma è disponibile solo per Angular 9 :

ng add @fortawesome/angular-fontawesome

AGGIORNAMENTO 8 ott 2019:

Puoi utilizzare un nuovo pacchetto https://www.npmjs.com/package/@fortawesome/angular-fontawesome

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

Aggiungi FontAwesomeModulealle importazioni 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 { }

Lega l'icona alla proprietà nel tuo componente 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;
}

Usa l'icona nel modello src/app/app.component.html:

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

RISPOSTA ORIGINALE:

Opzione 1:

Puoi usare il modulo npm angular -font-awesome

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

Importa il modulo:

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

Se stai usando la CLI angolare, aggiungi il fantastico font CSS agli stili all'interno di angular-cli.json

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

NOTA: se si utilizza il preprocessore SCSS, modificare semplicemente il CSS per SCSS

Esempio di utilizzo:

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

Optoin 2:

C'è una storia ufficiale per questo adesso

Installa la fantastica libreria di font e aggiungi la dipendenza package.json

npm install --save font-awesome

Utilizzando CSS

Per aggiungere icone CSS Font Awesome alla tua app ...

// in .angular-cli.json

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

Usando SASS

Crea un file vuoto _variables.scssin src/.

Aggiungi quanto segue a _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; In styles.scssaggiungere quanto segue:

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

Test

Esegui serve per eseguire l'applicazione in modalità di sviluppo e vai a http: // localhost: 4200 .

Per verificare che Font Awesome sia stato impostato correttamente, passare src/app/app.component.htmlal seguente ...

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

Dopo aver salvato questo file, torna al browser per vedere l'icona Font Awesome accanto al titolo dell'app.

Inoltre, esiste una domanda correlata: l' interfaccia della riga di comando angolare genera i file di font fantastici dei font nella radice dist poiché, come impostazione predefinita, la clip angolare invia i caratteri alla distradice, il che non è affatto un problema.

Con Angular2RC5 e angular-cli 1.0.0-beta.11-webpack.8puoi farlo con le importazioni css.

Basta installare font fantastico:

npm install font-awesome --save

e quindi importare font-awesome in uno dei file di stile configurati:

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

(i file di stile sono configurati in angular-cli.json)

Ho pensato di aggiungere la mia risoluzione a questo dato che font-awesome è ora installato in modo diverso in base alla loro documentazione.

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

Il motivo per cui è sfuggente ora mi sfugge, ma ho pensato di rimanere con la versione più recente piuttosto che ricadere nel vecchio carattere fantastico.

Quindi l'ho importato nel mio scss

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

Spero che questo ti aiuti

Molte istruzioni sopra funzionano, suggerisco di guardarle. Tuttavia, qualcosa da notare:

L'uso <i class="fas fa-coffee"></i> non ha funzionato nel mio progetto (nuovo progetto di pratica solo una settimana fa) dopo l'installazione e l'icona di esempio qui è stata copiata negli appunti da Font Awesome nell'ultima settimana.

Questo <i class="fa fa-coffee"></i> funziona . Se dopo aver installato Font Awesome sul tuo progetto non funziona ancora, ti suggerisco di controllare la classe sulla tua icona per rimuovere la 's' per vedere se funziona allora.

Ci sono molte buone risposte qui. Ma se hai provato tutti loro e hai comunque ottenuto quadrati invece di icone fantastiche, controlla le tue regole CSS. Nel mio caso avevo la seguente regola:

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

E sovrascrive i caratteri fontawesome. Sostituendo il *selettore per bodyrisolvere il mio problema:

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

Per Angular 6,

Primo npm install font-awesome --save

Aggiungi node_modules/font-awesome/css/font-awesome.cssa angular.json .

Ricorda di non aggiungere alcun punto davanti a node_modules/.

Questo post descrive come integrare Fontawesome 5 in Angular 6 (anche Angular 5 e le versioni precedenti funzioneranno, ma poi dovrai adattare i miei scritti)

Opzione 1: aggiungere i file css

Pro: Ogni icona sarà inclusa

Contra: ogni icona verrà inclusa (dimensioni più grandi dell'app perché sono inclusi tutti i caratteri)

Aggiungi il seguente pacchetto:

npm install @fortawesome/fontawesome-free-webfonts

Successivamente aggiungi le seguenti righe al tuo 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"
],
...    
}

Opzione 2: pacchetto angolare

Pro: dimensioni dell'app ridotte

Contro: devi includere tutte le icone che vuoi usare separatamente

Usa il pacchetto FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Segui la loro documentazione per aggiungere le icone. Usano le icone svg, quindi devi solo aggiungere le icone svgs /, che usi davvero.

Dopo un po 'di sperimentazione sono riuscito a ottenere il seguente funzionamento:

1. Installa con npm:

   npm install font-awesome --save
   

2. aggiungi al file angular-cli-build.js :

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

3. aggiungi a index.html

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

La chiave era includere i tipi di file dei caratteri nel file angular-cli-build.js

. + (Css | css.map | otf | EOT | svg | TTF | WOFF | woff2)

La risposta accettata è obsoleta.

Per angolare 9 e Fontawesome 5

1. Installa FontAwesome

   npm install @ fortawesome / fontawesome-free --save

2. Registralo su angular.json sotto stili

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

3. Usalo sulla tua applicazione

Modifica: sto usando angolare ^ 4.0.0 e Electron ^ 1.4.3

Se hai problemi con ElectronJS o simili e hai una sorta di errore 404, una possibile soluzione alternativa è quella di modificare il tuo webpack.config.js, aggiungendo (e supponendo che tu abbia il modulo del nodo fantastico per font installato attraverso npm o nel file package.json) :

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

Nota che la configurazione del webpack che sto usando ha src/app/distcome output e, in dist, una assetscartella viene creata dal 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'
},

Quindi, in sostanza, ciò che sta accadendo attualmente è:

• Webpack sta copiando la cartella dei caratteri nella cartella delle risorse di sviluppo.
• Webpack sta copiando la cartella delle distrisorse di sviluppo nella cartella delle risorse

Ora, quando il processo di compilazione sarà terminato, l'applicazione dovrà cercare il .scssfile e la cartella contenente le icone, risolvendole correttamente. Per risolverli, l'ho usato nella mia configurazione del webpack:

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

Infine, nel .scssfile sto importando il .scss font-impressionante e definire il percorso dei font, che è, ancora una volta, dist/assets/font-awesome/fonts. Il percorso èdist perché nel mio webpack.config output.path è impostato comehelpers.root('src/app/dist');

Quindi, in app.scss:

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

Si noti che, in questo modo, definirà il percorso del font (usato più avanti nel file .scss) e importerà il file .scss usando ~font-awesomeper risolvere il percorso font-awesome node_modules.

Questo è abbastanza complicato, ma è l'unico modo che ho trovato per aggirare il problema di errore 404 con Electron.js

A partire da https://github.com/AngularClass/angular-starter , dopo aver testato molte diverse combinazioni di configurazione, ecco cosa ho fatto per farlo funzionare con AoT.

Come già detto molte volte, nel mio app.component.scss:

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

Quindi in webpack.config.js (in realtà webpack.commong.js nello starter pack):

Nella sezione plugin:

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

Nella sezione delle regole:

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

Ho sprecato diverse ore cercando di ottenere l'ultima versione di FontAwesome 5.2.0 funzionante con AngularCLI 6.0.3 e Material Design. Ho seguito le istruzioni di installazione di npm dal sito Web FontAwesome

I loro ultimi documenti indicano che è necessario eseguire l'installazione utilizzando quanto segue:

npm install @fortawesome/fontawesome-free

Dopo aver perso diverse ore, ho finalmente disinstallato e installato font fantastico usando il seguente comando (questo installa FontAwesome v4.7.0):

npm install font-awesome --save

Ora funziona benissimo usando:

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

Font Awesome ti offre scalableicone vettoriali che possono essere personalizzate all'istante: dimensioni, colore, ombreggiatura e tutto ciò che può essere fatto con la potenza diCSS .

Crea un nuovo progetto e naviga nel progetto.

ng new navaApp
cd navaApp

Installa la fantastica libreria di font e aggiungi la dipendenza package.json .

npm install --save font-awesome

Utilizzando CSS

Per aggiungere icone CSS Font Awesome alla tua app ...

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

Usando SASS

Crea nuovo progetto con SASS:

ng new cli-app --style=scss

Da utilizzare con un progetto esistente con CSS :

Rinomina src/styles.cssin src/styles.scss Modifica angular.jsonper cercare styles.scssanziché css:

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

Assicurati di passare styles.cssastyles.scss .

Crea un file vuoto _variables.scssinsrc/.

Aggiungi quanto segue a _variables.scss:

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

In styles.scssaggiungere quanto segue:

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

Puoi usare il pacchetto Angular Font Awesome

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

e quindi importare nel modulo:

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

e importa lo stile nel file angular-cli:

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

vedi maggiori dettagli sul pacchetto nella libreria npm:

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

e poi usalo in questo modo:

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

Per usare Font Awesome 5 nel tuo progetto Angular, inserisci il codice qui sotto nel file src / index.html.

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

In bocca al lupo!

Per fontawesome 5.x + il modo più semplice sarebbe il seguente,

installare usando il pacchetto npm: npm install --save @fortawesome/fontawesome-free

Nel tuo styles.scssfile includere:

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

Nota: se si dispone di un _variables.scssfile, è più appropriato includere al suo $fa-font-pathinterno e non nel styles.scssfile.

Utilizzando LESS (non SCSS) e Angular 2.4.0 e Webpack standard (non CLI angolare, per me ha funzionato:

npm install --save font-awesome

e (nella mia app.component.less):

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

e ovviamente potresti aver bisogno di questo frammento ovvio e altamente intuitivo (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]'
        },

Il caricatore è lì per correggere errori del webpack del genere

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

e regexp corrisponde a quei riferimenti svg (con o senza specifica di versione). A seconda della configurazione del tuo webpack potresti non averne bisogno o potresti aver bisogno di qualcos'altro.

Aggiungilo nel tuo package.json come "devDependencies" font-awesome: "numero versione"

Vai al prompt dei comandi digitare il comando npm che hai configurato.

Volevo usare Font Awesome 5+ e la maggior parte delle risposte si concentra su versioni precedenti

Per il nuovo Font Awesome 5+ il progetto angolare non è stato ancora rilasciato, quindi se vuoi fare uso degli esempi citati sul fantastico sito web di font atm devi usare un modo per aggirare. (specialmente i fas, classi lontane invece della classe fa)

Ho appena importato il cdn in Font Awesome 5 nel mio styles.css. Ho appena aggiunto questo nel caso in cui qualcuno aiuti a trovare la risposta più velocemente di me :-)

Codice in Style.css

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

Se per qualche motivo non è possibile installare il pacchetto, gettare npm. Puoi sempre modificare index.html e aggiungere font CSS fantastici nella testa. E poi l'ho appena usato nel progetto.

Per webpack2 usare:

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

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

Per Angular 9 usando ng:

ng add @fortawesome/angular-fontawesome@0.6.x

Guarda qui per maggiori informazioni

Ora ci sono alcuni modi per installare fontAwesome sulla CLI angolare:

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

Riferimento qui: https://github.com/FortAwesome/angular-fontawesome