web-dev-qa-db-fra.com

Comment ajouter font-awesome au projet Angular 2 + CLI

J'utilise la CLI angulaire 2+ et angulaire.

Comment puis-je ajouter font-awesome à mon projet?

angularwebpackangular-cli
207
Nik

Après la version finale de Angular 2.0, la structure du projet CLI Angular2 a été modifiée - vous n’avez besoin ni de fichiers fournisseurs, ni de system.js, mais uniquement de WebPack. Alors tu fais:

  1. npm install font-awesome --save

  2. Dans le fichier angular-cli.json, localisez le tableau styles[] et ajoutez le répertoire font-awesome references, 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 "// -il webpack générera automatiquement un élément css de lien à partir de cela!? 
], 
 ... 
} 
] 
 
],

  3. Placez des icônes font-awesome dans le fichier HTML de votre choix:

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

  4. Arrête l'application Ctrl + c puis relancez l'application en utilisant ng serve car les observateurs ne concernent que le dossier src et angular-cli.json n'est pas pris en compte pour les modifications.

  5. Profitez de vos superbes icônes!
417
AIon

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

npm install font-awesome --save

et l'importez dans votre /src/styles.scss avec:

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

Conseil: évitez autant que possible de gâcher l'infrastructure angular-cli. ;)

105
F.D.Castel

La réponse principale est un peu dépassée et il existe un moyen légèrement plus facile.

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

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

en utilisant le ~, sass cherchera dans 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, il fonctionnera correctement avec ~ et non avec le chemin relatif qui sera erroné à ce stade.

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

58
Ced

Il y a 3 parties à utiliser Font-Awesome dans Angular Projects

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

Installation

Installez à partir de NPM et enregistrez sur votre package.json

npm install --save font-awesome

StylingSi vous utilisez CSS

Insérer dans votre style.css

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

StylingSi vous utilisez SCSS

Insérer 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 Matériau angulaire

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

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

et ajoutez MatIconModule à vos @NgModule importations

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

}

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

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

Avec Angular2 RC5 et angular-cli 1.0.0-beta.11-webpack.8, vous pouvez y parvenir avec les importations css.

Il suffit d'installer la 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)

13
shusson

Beaucoup d'instructions ci-dessus fonctionnent, je suggère de regarder celles-ci. Cependant, quelque chose à noter:

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

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

3
mckenna

Après quelques expériences, j'ai réussi à obtenir les résultats suivants:

  1. Installer avec npm:

    npm install font-awesome --save

  2. ajouter à angular-cli-build.js fichier:

    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 fichier de police dans le fichier angular-cli-build.js 

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

3
Nik

Edit: J'utilise angular ^ 4.0.0 et Electron ^ 1.4.3

Si vous avez des problèmes avec ElectronJS ou similaire et que vous avez une sorte d'erreur 404, une solution de contournement 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 webpack que j'utilise a src/app/dist en sortie et que, dans dist, un dossier assets 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 est:

  • Webpack copie le dossier de polices dans le dossier dev assets.
  • Webpack copie le dossier des actifs de dev dans le dossier dist assets

Maintenant, lorsque le processus de construction sera terminé, l’application devra rechercher le fichier .scss et le dossier contenant les icônes, en les résolvant correctement . Pour les résoudre, j’ai utilisé cela dans ma config WebPack:

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

Enfin, dans le fichier .scss, j'importe le fichier font-awesome .scss et définit le chemin des polices, qui est, encore une fois, dist/assets/font-awesome/fonts. Le chemin est dist car dans mon webpack.config, output.path est défini comme helpers.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-awesome pour résoudre le chemin font-awesome dans node_modules.

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

1
briosheje

Ce message décrit comment intégrer Fontawesome 5 dans Angular 6 (Angular 5 et les versions précédentes fonctionneront également, mais vous devrez 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

Ensuite, ajoutez les lignes suivantes à votre 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

Il suffit de suivre leur documentation pour ajouter les icônes. Ils utilisent les icônes-svg, vous n'avez donc qu'à ajouter les svgs/icônes que vous utilisez vraiment.

1
Paul

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

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

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

Ensuite, dans webpack.config.js (en réalité, webpack.commong.js dans le Starter Pack): 

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

Il y a beaucoup de bonnes réponses ici. Mais si vous avez tout essayé et que vous avez toujours des carrés à la place d'icônes fontawesome, 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. Le simple remplacement du sélecteur * par body a résolu mon problème:

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

Pour angulaire 6,

Premier npm install font-awesome --save

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

Rappelez-vous not pour ajouter des points devant le node_modules/.

1
Alf Moh

Je pensais que jetterais ma résolution à cela puisque font-awesome est maintenant installé différemment selon leur documentation.

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

Pourquoi est-il si fort maintenant de m'échapper, mais je pensais que je m'en tiendrais à la version la plus récente plutôt que de retomber dans l'ancienne police - génial.

Puis 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

1
Nabel

Vous pouvez utiliser le package Angular Font Awesome

npm installer --save font-awesome angular-font-awesome

puis importez dans votre module:

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

et importer 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

0
Shmulik

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 npm sur le site Web de FontAwesome

Leurs derniers documents vous demandent de l'installer de la manière suivante:

npm install @fortawesome/fontawesome-free

Après avoir perdu plusieurs heures, je l'ai finalement désinstallé et installé awesome font en utilisant la commande suivante (cela installe FontAwesome v4.7.0):

npm install font-awesome --save

Maintenant cela 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>
0
Helzgate

Le package font-awesome sur NPM n'a pas été mis à jour depuis 2016.

Mon problème était que j'utilisais une icône qui a été ajoutée dans une version ultérieure de font-awesome.

0
squirtgun

En utilisant LESS (pas SCSS), Angular 2.4.0 et Webpack (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 aurez peut-être besoin de cet extrait évident et hautement 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 webpack du genre 

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

et l'expression rationnelle correspond à ces références svg (avec ou sans spécification de version). En fonction de la configuration de votre pack Web, vous n'en aurez peut-être pas besoin ou vous aurez besoin d'autre chose. 

0
dpnmn

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]

0
aristotll

Si, pour une raison quelconque, vous ne pouvez pas installer le paquet via npm. Vous pouvez toujours éditer index.html et ajouter une police CSS géniale dans la tête. Et puis juste utilisé dans le projet.

0
Semir Hodzic

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

Accédez à l'invite de commande, tapez la commande npm que vous avez configurée.

0
user1349544

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

Pour la nouvelle police Awesome 5+, le projet angular n’a pas encore été publié. Par conséquent, si vous souhaitez utiliser les exemples mentionnés dans le site Web awesome font, vous devez utiliser une solution de contournement. (surtout les fas, classes éloignées au lieu de la classe fa)

Je viens d'importer le cdn dans Font Awesome 5 dans mon styles.css. Je viens d'ajouter 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";
0
Ferdi Tolenaar