Sto usando Angular 2+ e Angular CLI.
Come aggiungo font-awesome al mio progetto?
Sto usando Angular 2+ e Angular CLI.
Come aggiungo font-awesome al mio progetto?
Risposte:
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:
npm install font-awesome --save
Nel angular-cli.json
file 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.json
invece il file, senza il../
. Ad esempio, utilizzare"node_modules/font-awesome/css/font-awesome.css"
.
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>
Arresta l'applicazione Ctrl+ cquindi esegui di nuovo l'app utilizzando ng serve
perché gli osservatori sono solo per la cartella src e angular-cli.json non viene osservato per le modifiche.
addons
fa? Vedo che è documentato come "Configurazione riservata per componenti aggiuntivi di terze parti installati". , ma non riesco a trovare alcuna gestione nel codice Angular-CLI .
addons
... Questo è stato nella mia attenzione per un po 'di tempo .. Aggiornerò la mia risposta una volta trovato qualcosa.
addons
proprietà non è più utilizzata. È sufficiente includere il font-awesome.css
file in styles
. Vedi github.com/angular/angular-cli/blob/master/docs/documentation/…
Se stai usando SASS, puoi semplicemente installarlo tramite npm
npm install font-awesome --save
e importalo nel tuo /src/styles.scss
con:
$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-cli
infrastruttura. ;)
ng build && ng serve -w
. È più facile e più sicuro lasciare che scss costruisca font + style piuttosto che provare a cambiare infra-cli infra;)
~
invece di ../node_modules/
, ad esempio@import '~font-awesome/scss/font-awesome.scss';
.css
importazione da ~font-awesome/css/font-awesome.min.css
e funziona benissimo (default fa-font-path) per angular4 / cli
La risposta migliore è un po 'datata e c'è un modo leggermente più semplice.
installare tramite npm
npm install font-awesome --save
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
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 MatIconModule
alle tue @NgModule
importazioni
@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 add
ma è 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 FontAwesomeModule
alle 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:
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>
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.scss
in src/
.
Aggiungi quanto segue a _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
In styles.scss
aggiungere 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.html
al 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 dist
radice, il che non è affatto un problema.
../
da davanti a"../node_modules/font-awesome/css/font-awesome.css"
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
nella tua risposta non è uguale a npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome
nei documenti, mi scuso se mi manca qualcosa di ovvio.
Con Angular2
RC5 e angular-cli 1.0.0-beta.11-webpack.8
puoi 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
)
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:4200
non sia in esecuzione dalla radice di questa cartella ... Come impacchettare font-fantastico nella localhost:4200
cartella radice ...
angular-cli@1.0.0-beta.11-webpack.2
e la configurazione del file di stile angular-cli.json
non funziona ...
1.0.0-beta.11-webpack.8
?
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 body
risolvere il mio problema:
body {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
body
dovrebbe funzionare, assicurati di non sovrascrivere il font da qualche altra parte, potresti essere tu a sovrascriverlo h*
o p
tag come facciamo di solito.
Per Angular 6,
Primo npm install font-awesome --save
Aggiungi node_modules/font-awesome/css/font-awesome.css
a 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:
Installa con npm:
npm install font-awesome --save
aggiungi al file angular-cli-build.js :
vendorNpmFiles : [
font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
]
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)
angular-cli-build.js
La risposta accettata è obsoleta.
Per angolare 9 e Fontawesome 5
Installa FontAwesome
npm install @ fortawesome / fontawesome-free --save
Registralo su angular.json sotto stili
"Node_modules/@fortawesome/fontawesome-free/css/all.min.css"
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/dist
come output e, in dist, una assets
cartella 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 è:
dist
risorse di sviluppo nella cartella delle risorseOra, quando il processo di compilazione sarà terminato, l'applicazione dovrà cercare il .scss
file 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 .scss
file 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-awesome
per 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 scalable
icone 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.css
in src/styles.scss
Modifica angular.json
per cercare styles.scss
anziché css
:
// in angular.json
"build": {
"options": {
"styles": [
"src/styles.scss"
],
}
}
Assicurati di passare styles.css
astyles.scss
.
Crea un file vuoto _variables.scss
insrc/
.
Aggiungi quanto segue a _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
In styles.scss
aggiungere 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:
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.scss
file 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.scss
file, è più appropriato includere al suo $fa-font-path
interno e non nel styles.scss
file.
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 Angular 9 usando ng
:
ng add @fortawesome/angular-fontawesome@0.6.x
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