web-dev-qa-db-fra.com

Installez la police awesome 5 avec NPM

Je travaille avec l'application Angular (6), et j'essaie d'utiliser des icônes FA et de la liste déroulante sans succès. J'utilise avec succès les icônes FA (4), telles que:

<i class="fa fa-align-justify"></i>

mais: ne fonctionne pas, j'utilise cette commande pour installer FA

npm install font-awesome --save

This image est de package.json

dans le dossier node_modules, je peux voir FA.css, mais il est écrit Font Awesome 4.7.0 ...image

Dans le fichier angular.json, J'ai référencé FA: "node_modules/font-awesome/css/font-awesome.min.css",

j'ai lu beaucoup de messages comme celui-làComment utiliser la police géniale 5 installée via NPM

Que dois-je faire d'autre?

angularfont-awesomefont-awesome-5
10
E.Meir

Pour la version 5, vous avez besoin du paquet suivant @fortawesome/fontawesome

Utilisez cette commande:

npm install @fortawesome/fontawesome-free

Visitez ici

Fontawesome propose des packages spécifiques pour Angular. Pour apprendre à utiliser avec Angular cliquez ici

20
itsmysterybox

Modifier:

Pour clarifier, la réponse ci-dessous considère à tort Font Awesome 4.7.0 plutôt que Font Awesome 5.

Original:

Cela devrait fonctionner simplement en faisant:

npm install font-awesome --save

Et en ajoutant:

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

...à ton styles.css ou styles.scss.

Une autre option utilise la police officielle awesome 5 angular composante

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

Dans votre modèle:

<div style="text-align:center">
  <fa-icon [icon]="faAlignJustify"></fa-icon>
</div>

Dans votre TypeScript:

import { faAlignJustify } from '@fortawesome/free-solid-svg-icons';

export class MyComponent {
  faAlignJustify = faAlignJustify;
}

Dans le module de votre composant:

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  declarations: [
    MyComponent
  ],
  imports: [
    BrowserModule,
    FontAwesomeModule
  ]
})
export class MyModule { }
5
Wingnod

Une pierre d'achoppement pour moi était la dernière partie de leur documentation d'installation. Il est recommandé de référencer le fichier all.css dans votre balise head.

Je ne l'ai pas mal fait.

La bonne façon de créer un lien vers ceci est la suivante:

J'espère que cela t'aides!

Cela devrait le faire fonctionner pour vous. De plus, je vous recommanderais de réinstaller la dernière version du paquet npm à l'aide du guide FontAwesome: https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

1
Dan Haddock