Comment ajouter font-awesome au projet Angular 2 + CLI

269

J'utilise Angular 2+ et Angular CLI.

Comment ajouter une police géniale à mon projet?

Nik
la source
J'ai le même problème. C'est comme si les fichiers étaient ignorés par la CLI et non copiés en mode dev. Cela dit, le fichier est là dans le répertoire / dist, quand une construction est terminée.
Thibs
Je ne comprends pas, pourquoi devons-nous ajouter font-awesome via npm, ne pourrions-nous pas simplement créer un lien vers font-awesome cdn? Qu'est-ce que je rate?
Rosdi Kasim
4
@RosdiKasim, vous pouvez créer un lien vers le CDN de votre fichier d'index. Il y a des cas où vous ne voudriez pas. Les projets d'entreprise peuvent ne pas autoriser de sources externes; CDN pourrait baisser; La mise à jour CLI peut avoir besoin de mettre à jour le fichier index.html, vous devrez donc vous assurer qu'il n'écrase pas vos liens actuels; font-awesome pourrait être une dépendance pour une autre bibliothèque npm; vous voulez verrouiller font-awesome sur une certaine version; votre processus de construction pourrait en dépendre ... (et ainsi de suite, vous avez l'idée) En fin de compte, jusqu'à la façon dont vous voulez l'intégrer.
Nik
Ok merci ... on dirait que je ne manque pas de grand chose ... Je veux juste m'assurer de bien comprendre les avantages et les inconvénients ... cheers.
Rosdi Kasim
Voir aussi la documentation officielle pour ajouter JS ou CSS: angular.io/guide/…
Guillaume Husta

Réponses:

469

Après la version finale d'Angular 2.0, la structure du projet CLI Angular2 a été modifiée - vous n'avez pas besoin de fichiers de fournisseur, pas de system.js - seulement du webpack. Vous faites donc:

  1. npm install font-awesome --save

  2. Dans le angular-cli.jsonfichier, localisez le styles[]tableau et ajoutez le répertoire de références font-awesome ici, comme ci-dessous:

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

    Dans les versions plus récentes d'Angular, utilisez angular.jsonplutôt le fichier sans le ../. Par exemple, utilisez "node_modules/font-awesome/css/font-awesome.css".

  3. Placez des icônes géniales dans n'importe quel fichier html que vous souhaitez:

    <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
  4. Arrêtez l'application Ctrl+ cpuis réexécutez l'application à l'aide de ng servecar les observateurs ne concernent que le dossier src et angular-cli.json n'est pas observé pour les modifications.

  5. Profitez de vos superbes icônes!
AIon
la source
3
Pouvez-vous expliquer ce que addonsfait? Je vois qu'il est documenté comme «Configuration réservée aux modules complémentaires tiers installés». , mais je ne trouve aucune manipulation dans le code Angular-CLI .
Arjan
1
Malheureusement @Arjan & @bjorkblom - je n'ai trouvé aucun document concernant ce addonsdossier ... Cela a été dans mon attention pendant un certain temps maintenant .. Je mettrai à jour ma réponse une fois que je trouverai quelque chose.
AIon
3
@Rosdi Kasim Jan - vous pouvez le faire - mais dans les applications plus grandes, vous n'utilisez généralement pas de cdns. D'abord parce que quelqu'un peut les pirater et compromettre indirectement votre application. Deuxièmement, parce que ce n'est pas seulement génial pour les polices - vous avez besoin d'autres bibliothèques externes comme le bootstrap, les bibliothèques dnd, etc. - si vous avez une requête http séparée - vers un cdn - pour chacune d'entre elles, ce sont de mauvaises performances. Ce que vous faites à la place, c'est de télécharger avec npm - et de regrouper tout votre code dans un seul fichier à l'aide de webpack ou quelque chose, minimisez et uglifiez cela - et c'est ainsi que vous pouvez exécuter votre application sur mobile - où les ressources sont faibles.
AIon
12
Remarque: la addonspropriété n'est plus utilisée. Il suffit d'inclure le font-awesome.cssfichier sous styles. Voir github.com/angular/angular-cli/blob/master/docs/documentation/…
0x2D9A3
2
Mise à jour: avec Angular 6.0.0, le nom de fichier est changé de .angular-cli.json en angular.json
Manoj Negi
123

Si vous utilisez SASS, vous pouvez simplement l'installer via npm

npm install font-awesome --save

et importez-le dans votre /src/styles.scssavec:

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

Conseil: Dans la mesure du possible, évitez de gâcher l' angular-cliinfrastructure. ;)

FDCastel
la source
C'est la meilleure solution imo. Fonctionne comme un charme après un ng build && ng serve -w. Il est plus facile et plus sûr de laisser scss construire le style + les polices que d'essayer de changer angular-cli infra;)
soywod
33
Meilleure réponse. Amélioration mineure: utiliser à la ~place de ../node_modules/, par exemple@import '~font-awesome/scss/font-awesome.scss';
m4js7er
5
ne fonctionne pas pour moi avec angular4 et scss. Je peux voir le css mais pas l'icône
Aniruddha Das
J'ai le même problème sur Angular4
Francesco
2
Utilisez l' .cssimportation depuis ~font-awesome/css/font-awesome.min.csset cela fonctionne très bien (chemin fa-font-path par défaut) pour angular4 / cli
Tim
67

La première réponse est un peu dépassée et il existe un moyen un peu plus simple.

  1. installer via npm

    npm install font-awesome --save

  2. dans votre style.css:

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

    ou dans votre style.scss:

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

    Modifier: comme indiqué dans les commentaires, la ligne des polices doit être modifiée sur les versions plus récentes en$fa-font-path: "../../../node_modules/font-awesome/fonts";

en utilisant le ~fera sass regarder node_module. Il vaut mieux le faire de cette façon qu'avec le chemin relatif. La raison en est que si vous téléchargez un composant sur npm et que vous importez font-awesome dans le composant scss, cela fonctionnera correctement avec ~ et non avec le chemin relatif qui sera incorrect à ce stade.

Cette méthode fonctionne pour tout module npm qui contient css. Cela fonctionne aussi pour scss. Cependant, si vous importez du CSS dans votre styles.scss, cela ne fonctionnera pas (et peut-être vice versa). Voici pourquoi

Ced
la source
Toujours la même erreur après avoir suivi vos étapes.
indra257
Impossible de charger les fichiers .ttf, woff et woff2
indra257
J'utilise cli 1.0. Juste pour vérifier, j'ai créé un exemple d'application et j'ai juste chargé font-awesome et déployé l'application. toujours cette erreur.
indra257
@ indra257 J'ai dû ajouter $ fa-font-path: "../node_modules/font-awesome/fonts"; dans styles.scss pour les instructions de travail ci-dessus
Todilo
Je n'ai pas de fichier style.scss dans mon projet. Dois-je suivre toutes les autres étapes après avoir ajouté le fichier styles.scss.
indra257
51

L'utilisation de Font-Awesome dans les projets angulaires se compose de 3 parties

  1. Installation
  2. Style (CSS / SCSS)
  3. Utilisation en angulaire

Installation

Installez à partir de NPM et enregistrez-le dans votre package.json

npm install --save font-awesome

Styling Si vous utilisez CSS

Insérez dans votre style.css

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

Style si vous utilisez SCSS

Insérez dans votre style.scss

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

Utilisation avec plain Angular 2.4+ 4+

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

Utilisation avec un matériau angulaire

Dans votre app.module.ts, modifiez le constructeur pour utiliser le MdIconRegistry

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

et ajouter MatIconModuleà vos @NgModuleimportations

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

}


Maintenant, dans n'importe quel fichier de modèle, vous pouvez maintenant le faire

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>
muttonUp
la source
1
Avez-vous un problème avec le regroupement de la police génial. Je pense que le principal problème est le regroupement lorsque nous utilisons Cli. les fichiers tff, woff, woff2 ne sont pas regroupés.
indra257
Je viens de créer un exemple d'application et j'ai suivi vos étapes. Regroupé l'application à l'aide de ng build. Dans la console, je vois toujours une erreur de chargement des fichiers woff et woff2
indra257
1
C'est correct. Cela fonctionne parfaitement bien avec ng servir. Avec ng build, cela fonctionne bien, mais la console montre qu'elle est incapable de charger certains fichiers woff, woff2.
indra257
Je ne vois pas le même problème, donc je m'attends à quelque chose de mal avec vos fichiers de construction / config. Je vous suggère de reproduire votre problème avec un cas de test et de créer une nouvelle question avec.
muttonUp
J'ai créé une application vide en utilisant angular-cli et ajouté font-awesome. Quels fichiers voulez-vous que je vérifie ..
indra257
26

MISE À JOUR février 2020: le package
fortawesome prend désormais en charge, ng addmais il n'est disponible que pour angular 9 :

ng add @fortawesome/angular-fontawesome

MISE À JOUR 8 octobre 2019:

Vous pouvez utiliser un nouveau package https://www.npmjs.com/package/@fortawesome/angular-fontawesome

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

Ajouter FontAwesomeModuleaux importations dans 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 { }

Liez l'icône à la propriété de votre composant 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;
}

Utilisez l'icône dans le modèle src/app/app.component.html:

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

RÉPONSE ORIGINALE:

Option 1:

Vous pouvez utiliser le module npm angular-font-awesome

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

Importez le module:

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

Si vous utilisez la CLI angulaire, ajoutez le CSS génial de police aux styles à l'intérieur du angular-cli.json

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

REMARQUE: si vous utilisez un préprocesseur SCSS, changez simplement le css pour scss

Exemple d'utilisation:

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

Optoin 2:

Il y a une histoire officielle pour ça maintenant

Installez la bibliothèque font-awesome et ajoutez la dépendance à package.json

npm install --save font-awesome

Utilisation de CSS

Pour ajouter des icônes CSS Awesome Font à votre application ...

// in .angular-cli.json

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

Utilisation de SASS

Créez un fichier vide _variables.scssdans src/.

Ajoutez ce qui suit à _variables.scss:

$fa-font-path : '../node_modules/font-awesome/fonts'; En styles.scssajouter ce qui suit:

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

Tester

Exécutez ng serve pour exécuter votre application en mode développement et accédez à http: // localhost: 4200 .

Pour vérifier que Font Awesome a été correctement configuré, passez src/app/app.component.htmlà ce qui suit ...

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

Après avoir enregistré ce fichier, revenez au navigateur pour voir l'icône Font Awesome à côté du titre de l'application.

Il y a aussi une question connexe Angular CLI génère les fichiers de polices impressionnants de la racine dist car, par défaut, le cli angulaire génère les polices à la distracine, ce qui n'est d'ailleurs pas du tout un problème.

kuncevic.dev
la source
Lorsque vous utilisez l'option 1, retirez-le ../devant"../node_modules/font-awesome/css/font-awesome.css"
Alf Moh
POURQUOI suis-je censé utiliser le nouveau package angulaire? Il semble bien plus d'un PITA de les importer individuellement.
MDave le
1
Je veux dire que npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-iconsdans votre réponse n'est pas égal à npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesomedans les documents, excuses si je manque quelque chose d'évident.
User632716
1
@ User632716 OK vient d'ajouter le package manquant à la commande d'installation npm.
kuncevic.dev
1
Merci beaucoup ... Je cherchais une police Angular 9 + géniale. MISE À JOUR février 2020 est la chose la plus utile après avoir perdu 1 jour.
Tejashree
15

Avec Angular2RC5 etangular-cli 1.0.0-beta.11-webpack.8 vous pouvez y parvenir avec les importations CSS.

Installez simplement une police géniale:

npm install font-awesome --save

puis importez font-awesome dans l'un de vos fichiers de style configurés:

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

(les fichiers de style sont configurés dans angular-cli.json)

shusson
la source
1
On dirait qu'il essaie d'importer mais obtient une erreur zone.js:101 - GET http://localhost:4200/node_modules/font-awesome/css/font-awesome.css 404 (Not Found) ... le fichier existe réellement mais ne semble localhost:4200pas s'exécuter à partir de la racine de ce dossier ... Comment empaqueter font-awesome dans localhost:4200le dossier racine ...
microchip78
aussi j'utilise [email protected]et la configuration du fichier de style angular-cli.jsonne fonctionne pas ...
microchip78
1
hmm c'est étrange, peut-être passer à 1.0.0-beta.11-webpack.8?
shusson
13

J'ai pensé que je mettrais ma résolution à cela car font-awesome est maintenant installé différemment selon leur documentation.

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

Pourquoi il est fortuit m'échappe maintenant mais pensais que je m'en tiendrais à la version la plus récente plutôt que de retomber dans l'ancienne police géniale.

Ensuite, je l'ai importé dans mon 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";

J'espère que cela t'aides

Nabel
la source
5

De nombreuses instructions ci-dessus fonctionnent, je suggère de les consulter. Cependant, quelque chose à noter:

L'utilisation <i class="fas fa-coffee"></i> n'a pas fonctionné dans mon projet (nouveau projet d'entraînement datant d'une semaine seulement) après l'installation et l'exemple d'icône ici a également été copié dans le presse-papiers de Font Awesome au cours de la semaine dernière.

Cela <i class="fa fa-coffee"></i> fonctionne . Si après avoir installé Font Awesome sur votre projet, cela ne fonctionne pas encore, je vous suggère de vérifier la classe sur votre icône pour supprimer le 's' pour voir si cela fonctionne alors.

mckenna
la source
4

Il y a beaucoup de bonnes réponses ici. Mais si vous les avez tous essayés et que vous obtenez toujours des carrés à la place des icônes impressionnantes, vérifiez vos règles CSS. Dans mon cas, j'avais la règle suivante:

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

Et il remplace les polices fontawesome. Il suffit de remplacer le *sélecteur pour bodyrésoudre mon problème:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
Suicide commercial
la source
Merci beaucoup de l'avoir fait pour moi. Je dois maintenant trouver comment faire fonctionner les polices car le faire dans un sélecteur de corps ne fonctionne pas pour moi
jgerstle
@jgerstle, la spécification de la police dans bodydevrait fonctionner, assurez-vous que vous ne remplacez pas la police ailleurs, peut-être la remplacez-vous dans h*ou les pbalises comme nous le faisons habituellement.
Suicide commercial du
Il y a quelque chose qui semble le remplacer, mais je ne pense pas que ce soit mon propre code, je pense que ce pourrait juste être les valeurs par défaut de chrome, c'est bizarre, car je le définis sur! Je vais devoir approfondir la question.
jgerstle
Je l'ai obtenu en utilisant: pas (.fa) pour garder le même sélecteur *, mais ne ciblez rien en utilisant font-awesome
jgerstle
4

Pour Angular 6,

Première npm install font-awesome --save

Ajouter node_modules/font-awesome/css/font-awesome.cssà angular.json .

N'oubliez pas de ne pas ajouter de points devant le node_modules/.

Alf Moh
la source
2
Je me retrouve avec juste des carrés pour les images quand je fais ça.
Gargouille le
même ici, comment avez-vous supprimé les carrés? @Gargoyle
AngularM
4

Cet article décrit comment intégrer Fontawesome 5 à Angular 6 (Angular 5 et les versions précédentes fonctionneront également, mais vous devez ensuite ajuster mes écrits)

Option 1: ajouter les fichiers css

Pro: Chaque icône sera incluse

Contra: chaque icône sera incluse (taille de l'application plus grande car toutes les polices sont incluses)

Ajoutez le package suivant:

npm install @fortawesome/fontawesome-free-webfonts

Ajoutez ensuite les lignes suivantes à votre fichier 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"
],
...    
}

Option 2: paquet angulaire

Pro: taille de l'application plus petite

Contra: Vous devez inclure chaque icône que vous souhaitez utiliser séparément

Utilisez le package FontAwesome 5 Angular:

npm install @fortawesome/angular-fontawesome

Suivez simplement leur documentation pour ajouter les icônes. Ils utilisent les icônes svg, vous n'avez donc qu'à ajouter les svgs / icônes, vous utilisez vraiment.

Paul
la source
Notez que vos chemins commencent par @fortawesome. Remarquez le mot «FORT», pas «FONT». Mon installation le fait aussi. Quelqu'un sait ce qui se passe avec ça?
Helzgate
Qu'à cela ne tienne, apparemment ils ont une structure de renommage en cours. Voir ce message Github
Helzgate
@Aniketkale qu'est-ce qui ne fonctionne pas? J'ai présenté deux options
Paul
3

Après quelques expérimentations, j'ai réussi à faire fonctionner les éléments suivants:

  1. Installer avec npm:

    npm install font-awesome --save
    
  2. ajouter au fichier angular-cli-build.js :

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

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

La clé était d'inclure les types de fichiers de polices dans le fichier angular-cli-build.js

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

Nik
la source
1
juste un angular-cli-build.jsavertissement, il n'y en a pas dans la dernière branche de
webpack
En outre, vendorNpmFiles est introuvable dans le code Angular-CLI actuel . En voyant la réponse acceptée d'Alon, je suppose que c'est dépassé?
Arjan
1
@Arjan yep, cette réponse est obsolète ... c'était pour la CLI pré webpack. La réponse d'Alon est la réponse acceptée
Nik
3

La réponse acceptée est obsolète.

Pour angular 9 et Fontawesome 5

  1. Installer FontAwesome

    npm install @ fortawesome / fontawesome-free --save

  2. Enregistrez-le sur angular.json sous styles

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

  3. Utilisez-le sur votre application

Ron Michael
la source
2

Edit: j'utilise angulaire ^ 4.0.0 et Electron ^ 1.4.3

Si vous rencontrez des problèmes avec ElectronJS ou similaire et que vous avez une sorte d'erreur 404, une solution de contournement possible consiste à modifier votre webpack.config.js, en ajoutant (et en supposant que le module de noeud font-awesome est installé via npm ou dans le fichier package.json) :

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

Notez que la configuration du webpack que j'utilise a src/app/distcomme sortie, et, en dist, un assetsdossier est créé par 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'
},

Donc, fondamentalement, ce qui se passe actuellement, c'est:

  • Webpack copie le dossier des polices dans le dossier des actifs de développement.
  • Webpack copie le dossier des actifs de développement dans le distdossier des actifs

Maintenant, lorsque le processus de génération sera terminé, l'application devra rechercher le .scssfichier et le dossier contenant les icônes, en les résolvant correctement. Pour les résoudre, je l'ai utilisé dans ma configuration webpack:

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

Enfin, dans le .scssdossier, j'importe la .scss de police-impressionnant et définir le chemin des polices, ce qui est, encore une fois, dist/assets/font-awesome/fonts. Le chemin estdist parce que dans mon webpack.config le output.path est défini commehelpers.root('src/app/dist');

Donc, dans app.scss:

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

Notez que, de cette manière, il définira le chemin de la police (utilisé plus tard dans le fichier .scss) et importera le fichier .scss en utilisant ~font-awesomepour résoudre le chemin de police génial dans node_modules.

C'est assez délicat, mais c'est le seul moyen que j'ai trouvé pour contourner le problème d'erreur 404 avec Electron.js

briosheje
la source
2

À partir de https://github.com/AngularClass/angular-starter , après avoir testé de nombreuses combinaisons de configurations différentes, voici ce que j'ai fait pour le faire fonctionner avec AoT.

Comme je l'ai déjà dit à plusieurs reprises, dans mon app.component.scss:

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

Puis dans webpack.config.js (en fait webpack.commong.js dans le pack de démarrage):

Dans la section plugins:

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

Dans la section des règles:

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

J'ai perdu plusieurs heures à essayer de faire fonctionner la dernière version de FontAwesome 5.2.0 avec AngularCLI 6.0.3 et Material Design. J'ai suivi les instructions d'installation de npm sur le site Web de FontAwesome

Leurs derniers documents vous demandent d'installer en utilisant les éléments suivants:

npm install @fortawesome/fontawesome-free

Après avoir perdu plusieurs heures, je l'ai finalement désinstallé et installé une police géniale à l'aide de la commande suivante (cela installe FontAwesome v4.7.0):

npm install font-awesome --save

Maintenant, ça fonctionne bien en utilisant:

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

Font Awesome vous offre scalabledes icônes vectorielles qui peuvent être instantanément personnalisées: taille, couleur, ombre portée et tout ce qui peut être fait avec la puissance de CSS.

Créez un nouveau projet et accédez au projet.

ng new navaApp
cd navaApp

Installez la bibliothèque font-awesome et ajoutez la dépendance à package.json.

npm install --save font-awesome

Utilisation de CSS

Pour ajouter des icônes CSS Awesome Font à votre application ...

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

Utilisation de SASS

Créez un nouveau projet avec SASS:

ng new cli-app --style=scss

À utiliser avec un projet existant avec CSS:

Renommer src/styles.cssen src/styles.scss Changer angular.jsonpour rechercher au styles.scsslieu de css:

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

Assurez-vous de passer styles.cssà styles.scss.

Créez un fichier vide _variables.scssdans src/.

Ajoutez ce qui suit à _variables.scss:

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

En styles.scssajouter ce qui suit:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
Mojtaba Nava
la source
C'est une bonne question. Ça a toujours été une question pour moi
Seyed Ali Mahmoody
2

Vous pouvez utiliser le package Angular Font Awesome

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

puis importez dans votre module:

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

et importez le style dans le fichier angular-cli:

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

voir plus de détails sur le paquet dans la bibliothèque npm:

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

puis l'utiliser comme ceci:

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

Shmulik
la source
2

Pour utiliser Font Awesome 5 dans votre projet Angular, insérez le code ci-dessous dans le fichier src / index.html.

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

Bonne chance!

Cherma Ramalho
la source
2

Pour fontawesome 5.x +, le moyen le plus simple serait le suivant,

installer à l'aide du package npm: npm install --save @fortawesome/fontawesome-free

Dans votre styles.scssdossier:

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

Remarque: si vous avez un _variables.scssfichier, il est plus approprié d'inclure l' $fa-font-pathintérieur et non dans le styles.scssfichier.

Imtiaz Shakil Siddique
la source
1

En utilisant LESS (pas SCSS) et Angular 2.4.0 et le Webpack standard (pas Angular CLI, les éléments suivants ont fonctionné pour moi:

npm install --save font-awesome

et (dans mon app.component.less):

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

et bien sûr, vous pourriez avoir besoin de cet extrait évident et très intuitif (dans module.loaders dans webpack.conf)

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

Le chargeur est là pour corriger les erreurs de type webpack

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

et l'expression régulière correspond à ces références svg (avec ou sans spécification de version). Selon la configuration de votre webpack, vous n'en aurez peut-être pas besoin ou vous aurez peut-être besoin d'autre chose.

dpnmn
la source
1

Ajoutez-le dans votre package.json en tant que "devDependencies" font-awesome: "numéro de version"

Accédez à la commande d'invite de commande de type npm que vous avez configurée.

user1349544
la source
Vous voudrez ajouter font-awesome à vos 'dépendances', pas 'dev-dependencies' car vous en aurez besoin dans votre version finale. De plus, les instructions ci-dessus ne répondent pas à la façon dont le projet Angular le récupérera une fois qu'elles seront ajoutées à votre fichier package.json.
Nik
1

Je voulais utiliser Font Awesome 5+ et la plupart des réponses se concentrent sur les anciennes versions

Pour le nouveau Font Awesome 5+, le projet angulaire n'a pas encore été publié, donc si vous souhaitez utiliser les exemples mentionnés sur le site Web de font awesome, vous devez utiliser une solution de contournement. (en particulier les classes fas, far au lieu de la classe fa)

Je viens d'importer le cdn dans Font Awesome 5 dans mon styles.css. Juste ajouté ceci au cas où cela aiderait quelqu'un à trouver la réponse plus rapidement que moi :-)

Code dans Style.css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";
Ferdi Tolenaar
la source
J'ai essayé ça. Fonctionne bien en local, mais lorsque j'essaie de le construire, des icônes ont disparu.
Piyush Choudhary
1

Si, pour une raison quelconque, vous ne pouvez pas installer le package, jetez npm. Vous pouvez toujours modifier index.html et ajouter une police CSS impressionnante dans la tête. Et puis je l'ai utilisé dans le projet.

Semir Hodzic
la source
1

Pour l'utilisation de webpack2:

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

au lieu de file-loader?name=/assets/fonts/[name].[ext]

aristotll
la source
1

Il existe maintenant plusieurs façons d'installer fontAwesome sur la CLI angulaire:

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

Référence ici: https://github.com/FortAwesome/angular-fontawesome

Archil Labadze
la source