J'utilise Angular 2+ et Angular CLI.
Comment ajouter une police géniale à mon projet?
J'utilise Angular 2+ et Angular CLI.
Comment ajouter une police géniale à mon projet?
Réponses:
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:
npm install font-awesome --save
Dans le angular-cli.json
fichier, 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.json
plutôt le fichier sans le../
. Par exemple, utilisez"node_modules/font-awesome/css/font-awesome.css"
.
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>
Arrêtez l'application Ctrl+ cpuis réexécutez l'application à l'aide de ng serve
car les observateurs ne concernent que le dossier src et angular-cli.json n'est pas observé pour les modifications.
addons
fait? 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 .
addons
dossier ... Cela a été dans mon attention pendant un certain temps maintenant .. Je mettrai à jour ma réponse une fois que je trouverai quelque chose.
addons
propriété n'est plus utilisée. Il suffit d'inclure le font-awesome.css
fichier sous styles
. Voir github.com/angular/angular-cli/blob/master/docs/documentation/…
Si vous utilisez SASS, vous pouvez simplement l'installer via npm
npm install font-awesome --save
et importez-le dans votre /src/styles.scss
avec:
$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-cli
infrastructure. ;)
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;)
~
place de ../node_modules/
, par exemple@import '~font-awesome/scss/font-awesome.scss';
.css
importation depuis ~font-awesome/css/font-awesome.min.css
et cela fonctionne très bien (chemin fa-font-path par défaut) pour angular4 / cli
La première réponse est un peu dépassée et il existe un moyen un peu plus simple.
installer via npm
npm install font-awesome --save
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
L'utilisation de Font-Awesome dans les projets angulaires se compose de 3 parties
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 @NgModule
importations
@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>
MISE À JOUR février 2020: le package
fortawesome prend désormais en charge, ng add
mais 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 FontAwesomeModule
aux 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:
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>
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.scss
dans src/
.
Ajoutez ce qui suit à _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
En styles.scss
ajouter 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 dist
racine, ce qui n'est d'ailleurs pas du tout un problème.
../
devant"../node_modules/font-awesome/css/font-awesome.css"
npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons
dans votre réponse n'est pas égal à npm install @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/angular-fontawesome
dans les documents, excuses si je manque quelque chose d'évident.
Avec Angular2
RC5 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
)
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:4200
pas s'exécuter à partir de la racine de ce dossier ... Comment empaqueter font-awesome dans localhost:4200
le dossier racine ...
angular-cli@1.0.0-beta.11-webpack.2
et la configuration du fichier de style angular-cli.json
ne fonctionne pas ...
1.0.0-beta.11-webpack.8
?
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
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.
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 body
résoudre mon problème:
body {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
body
devrait fonctionner, assurez-vous que vous ne remplacez pas la police ailleurs, peut-être la remplacez-vous dans h*
ou les p
balises comme nous le faisons habituellement.
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/
.
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.
Après quelques expérimentations, j'ai réussi à faire fonctionner les éléments suivants:
Installer avec npm:
npm install font-awesome --save
ajouter au fichier angular-cli-build.js :
vendorNpmFiles : [
font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
]
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)
angular-cli-build.js
avertissement, il n'y en a pas dans la dernière branche de
La réponse acceptée est obsolète.
Pour angular 9 et Fontawesome 5
Installer FontAwesome
npm install @ fortawesome / fontawesome-free --save
Enregistrez-le sur angular.json sous styles
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
Utilisez-le sur votre application
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/dist
comme sortie, et, en dist, un assets
dossier 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:
dist
dossier des actifsMaintenant, lorsque le processus de génération sera terminé, l'application devra rechercher le .scss
fichier 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 .scss
dossier, 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-awesome
pour 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
À 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]'
}
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>
Font Awesome vous offre scalable
des 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.css
en src/styles.scss
Changer angular.json
pour rechercher au styles.scss
lieu 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.scss
dans src/
.
Ajoutez ce qui suit à _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
En styles.scss
ajouter ce qui suit:
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
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:
puis l'utiliser comme ceci:
<i class="fa fa-coffee"></i>
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!
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.scss
dossier:
$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.scss
fichier, il est plus approprié d'inclure l' $fa-font-path
intérieur et non dans le styles.scss
fichier.
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.
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.
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";
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.
Pour Angular 9 utilisant ng
:
ng add @fortawesome/angular-fontawesome@0.6.x
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