Come aggiungere font-awesome al progetto Angular 2 + CLI


269

Sto usando Angular 2+ e Angular CLI.

Come aggiungo font-awesome al mio progetto?


Ho lo stesso problema. È come se i file venissero ignorati dalla CLI e non fossero copiati in modalità dev. Detto questo, il file si trova nella directory / dist, al termine della compilazione.
Thibs

Non capisco, perché dobbiamo aggiungere font-awesome tramite npm, non potremmo semplicemente collegarci a cdn font-awesome? Cosa mi sto perdendo?
Rosdi Kasim,

4
@RosdiKasim puoi collegarti al cdn dal tuo file indice. Ci sono casi in cui non vorresti farlo però. I progetti aziendali potrebbero non consentire fonti esterne; CDN potrebbe scendere; L'aggiornamento della CLI potrebbe dover aggiornare il file index.html, quindi dovrai assicurarti che non sovrascriva i tuoi collegamenti attuali; font-awesome potrebbe essere una dipendenza per un'altra libreria npm; vuoi bloccare font-awesome in una determinata versione; il tuo processo di compilazione potrebbe dipendere da esso ... (e così via, hai avuto l'idea) Alla fine, fino a come vuoi portarlo dentro.
Nik

Ok grazie ... sembra che non mi manchi molto ... Voglio solo assicurarmi di capire i pro e i contro ... evviva.
Rosdi Kasim,

Vedi anche la documentazione ufficiale per l'aggiunta di JS o CSS: angular.io/guide/…
Guillaume Husta

Risposte:


469

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!

3
Puoi spiegare cosa addonsfa? Vedo che è documentato come "Configurazione riservata per componenti aggiuntivi di terze parti installati". , ma non riesco a trovare alcuna gestione nel codice Angular-CLI .
Arjan,

1
Sfortunatamente @Arjan e @bjorkblom - non sono riuscito a trovare alcun documento relativo a questo file addons... Questo è stato nella mia attenzione per un po 'di tempo .. Aggiornerò la mia risposta una volta trovato qualcosa.
AIon,

3
@Rosdi Kasim Jan - potresti farlo - ma nelle app più grandi in genere non usi cdns. Innanzitutto perché qualcuno può hackerarli e compromettere indirettamente la tua app. In secondo luogo perché non è solo fantastico per i font - hai bisogno di altre librerie esterne come bootstrap, librerie dnd ecc. - se hai una richiesta http separata - a un cdn - per ognuna di esse, sono cattive prestazioni. Quello che fai invece, è scaricare con npm - e raggruppare tutto il tuo codice in un singolo file usando webpack o qualcosa del genere, minimizzare e ugualizzarlo - ed è così che puoi eseguire la tua app sul cellulare - dove le risorse sono basse.
AIon

12
Nota: la addonsproprietà non è più utilizzata. È sufficiente includere il font-awesome.cssfile in styles. Vedi github.com/angular/angular-cli/blob/master/docs/documentation/…
0x2D9A3

2
Aggiornamento: Con Angular 6.0.0 il nome del file viene modificato da .angular-cli.json a angular.json
Manoj Negi,

123

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 migliore soluzione imo. Funziona come un incantesimo dopo a ng build && ng serve -w. È più facile e più sicuro lasciare che scss costruisca font + style piuttosto che provare a cambiare infra-cli infra;)
soywod

33
Migliore risposta. Miglioramento minore: utilizzare ~invece di ../node_modules/, ad esempio@import '~font-awesome/scss/font-awesome.scss';
m4js7er

5
non funziona per me con angular4 e scss. Riesco a vedere il CSS ma non l'icona
Aniruddha Das

Ho lo stesso problema su Angular4
Francesco,

2
Usa l' .cssimportazione da ~font-awesome/css/font-awesome.min.csse funziona benissimo (default fa-font-path) per angular4 / cli
Tim

67

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é


Continuo a ricevere lo stesso errore dopo aver seguito i tuoi passaggi.
indra257,

Impossibile caricare i file .ttf, woff e woff2
indra257,

Sto usando cli 1.0. Solo per ricontrollare, ho creato un'app di esempio e ho appena caricato font-awesome e distribuito l'app. continua a ricevere quell'errore.
indra257,

@ indra257 Ho dovuto aggiungere $ fa-font-path: "../node_modules/font-awesome/fonts"; in styles.scss per le istruzioni di cui sopra per lavorare
Todilo

Non ho file style.scss nel mio progetto. Devo seguire altri passaggi dopo aver aggiunto il file styles.scss.
indra257,

51

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>

1
Hai qualche problema con il raggruppamento del font-fantastico. Penso che il problema principale sia il raggruppamento quando usiamo Cli. I file tff, woff, woff2 non vengono raggruppati.
indra257,

Ho appena creato un'applicazione di esempio e ho seguito i tuoi passaggi. In bundle l'app usando ng build. Nella console sto ancora vedendo Impossibile caricare l'errore di file woff e woff2
indra257

1
È corretto. Funziona perfettamente con servizio. Con ng build, funziona bene, ma la console mostra che non è in grado di caricare alcuni file woff, woff2.
indra257,

Non vedo lo stesso problema, quindi mi aspetto che qualcosa non vada nei tuoi file build / config. Ti suggerisco di replicare il tuo problema con un caso di prova e creare una nuova domanda con esso.
muttonUp,

Ho creato un'app vuota usando angular-cli e aggiunto font-awesome. Quali file vuoi che controlli ...
indra257,

26

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.


Quando si utilizza l'opzione 1, rimuovere ../da davanti a"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh

PERCHÉ dovrei usare il nuovo pacchetto angolare? Sembra molto più di un PITA importarli singolarmente.
MDaveva il

1
Voglio dire che npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconsnella tua risposta non è uguale a npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesomenei documenti, mi scuso se mi manca qualcosa di ovvio.
Utente 632716

1
@ User632716 OK appena aggiunto il pacchetto mancante al comando npm install.
kuncevic.dev,

1
Grazie mille ... stavo cercando Angular 9 + font fantastico. AGGIORNAMENTO Febbraio 2020 è la cosa più utile dopo aver perso 1 giorno.
Tejashree,

15

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)


1
Sembra che stia provando a importare ma sta ricevendo un errore zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... il file esiste davvero ma sembra che localhost:4200non sia in esecuzione dalla radice di questa cartella ... Come impacchettare font-fantastico nella localhost:4200cartella radice ...
microchip78

anche io sto usando angular-cli@1.0.0-beta.11-webpack.2e la configurazione del file di stile angular-cli.jsonnon funziona ...
microchip78

1
hmm che è strano, forse l'aggiornamento a 1.0.0-beta.11-webpack.8?
Shusson,

13

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


5

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.


4

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;
}

Grazie mille che l'ho fatto per me concesso ora devo capire come far funzionare i caratteri poiché farlo in un selettore del corpo non funziona per me
jgerstle

@jgerstle, specificando font in bodydovrebbe funzionare, assicurati di non sovrascrivere il font da qualche altra parte, potresti essere tu a sovrascriverlo h*o ptag come facciamo di solito.
Suicidio commerciale

Ya qualcosa sembra sovrascriverlo, ma non penso che sia il mio codice, penso che potrebbe essere solo l'impostazione predefinita di Chrome, ma è strano perché l'ho impostato su! Important e sembra comunque essere ignorato. Dovrò approfondire.
jgerstle,

Ho capito usando: not (.fa) per mantenere lo stesso * selettore, ma non indirizzare nulla usando font-awesome
jgerstle

4

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


2
Finisco con solo i quadrati per le immagini quando faccio questo.
Gargoyle,

stesso qui, come hai rimosso i quadrati? @Gargoyle
AngularM

4

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.


Nota che i tuoi percorsi iniziano con @fortawesome. Nota la parola 'FORT', non 'FONT' Anche la mia installazione sta facendo questo. Qualcuno sa cosa succede con questo?
Helzgate,

Non importa, a quanto pare hanno in corso una struttura di ridenominazione. Vedi questo post di Github
Helzgate,

@Aniketkale cosa non funziona? Ho presentato due opzioni
Paul

3

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)


1
solo un angular-cli-build.js
avvertimento non ce n'è

Inoltre, vendorNpmFiles non si trova nell'attuale codice CLI angolare . Vedendo la risposta accettata da Alon, immagino che questo sia obsoleto?
Arjan,

1
@Arjan sì, questa risposta è obsoleta ... questo era per la CLI pre webpack. La risposta di Alon è la risposta accettata
Nik

3

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


2

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


2

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]'
}

2

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>

2

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

È una buona domanda. È sempre stata una domanda per me
Seyed Ali Mahmoody,

2

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>


2

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!


2

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.


1

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.


1

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

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


Ti consigliamo di aggiungere font-fantastico alle tue "dipendenze", non a "dipendenze dev" poiché ne avrai bisogno nella build finale. Inoltre, le istruzioni precedenti non rispondono al modo in cui il progetto Angular lo raccoglierà una volta aggiunti al file package.json.
Nik

1

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

Ci ho provato Funziona bene in locale, ma quando provo a costruirlo, le icone sono scomparse.
Piyush Choudhary,

1

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.


1

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]



1

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.