Comment ajouter de la police génial Angulaire 2 + CLI projet
j'utilise Angular 2+ et Angular CLI.
comment ajouter font-awesome à mon projet?
18 réponses
après Angular 2.0 final release, la structure du projet Angular2 CLI a été modifié - vous n'avez pas besoin de fichiers Fournisseurs, Pas de système.js-seulement webpack. C'est ce que vous faites:
-
npm install font-awesome --save
-
Dans le angulaires-cli.fichier json localisez le tableau
styles[]
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!? ], ... } ] ],
-
placez quelques icônes font-awesome dans n'importe quel fichier html que vous voulez:
<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>
-
Arrêter l'application Ctrl + c puis de le ré-exécuter l'application à l'aide de
ng serve
parce que les observateurs ne sont que pour le dossier src et angulaire-cli.json n'est pas observé pour des modifications. - profitez de vos superbes icônes!
si vous utilisez SASS, vous pouvez simplement l'installer via npm
npm install font-awesome --save
et l'importer 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, éviter de nuire à l'infrastructure angular-cli
. ;)
la réponse du haut est un peu dépassée et il y a un moyen légèrement plus facile.
-
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';
Edit: , comme indiqué dans les commentaires la ligne pour les polices doit être changée sur les versions plus récentes à
$fa-font-path: "../../../node_modules/font-awesome/fonts";
en utilisant le ~
fera Sass regarder 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 component sur npm, et que vous importez font-awesome à l'intérieur du component scss, alors il fonctionnera correctement avec ~ et non avec le chemin relatif qui sera erroné à ce point.
cette méthode fonctionne pour tout module npm qui contient des css. Il travaille pour scss. Toutefois si vous importez des css dans vos styles.scss, ça ne marchera pas (et peut-être vice-versa). Voici pourquoi
Il y a 3 pièces à l'aide de la Police Génial Angulaire des Projets
- Installation
- style (CSS / SCSS)
- Usage en angle
Installation
Installer à partir d'MNP et enregistrez-le sur votre paquet.json
npm install --save font-awesome
style If en utilisant CSS
insérez dans votre style.css
@import '~font-awesome/css/font-awesome.css';
style Si l'aide SCSS
insérez dans votre style.scss
$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';
Usage À Angle Uni 2.4+ 4+
<i class="fa fa-area-chart"></i>
utilisation avec angulaire Matière
Dans votre application.module.ts modifier le constructeur pour utiliser le MdIconRegistry
export class AppModule {
constructor(matIconRegistry: MatIconRegistry) {
matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
}
et ajouter MatIconModule
à votre @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>
avec Angular2
RC5 et angular-cli 1.0.0-beta.11-webpack.8
vous pouvez atteindre cet objectif avec CSS imports.
il suffit d'installer font awesome:
npm install font-awesome --save
et ensuite importer 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
)
Option 1:
Vous pouvez utiliser angulaires-font-awesome npm module
npm install --save font-awesome angular-font-awesome
importer le module:
...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }
si vous utilisez Angular CLI, ajoutez la police-awesome CSS aux styles à l'intérieur de l'angular-cli.json
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
NOTE: Si vous utilisez le préprocesseur SCSS, changez simplement le css pour scss
Exemple D'Utilisation:
<fa name="cog" animation="spin"></fa>
Optoin 2:
Il y a un histoire officielle maintenant
installez la bibliothèque font-awesome et ajoutez la dépendance à package.json
npm install --save font-awesome
utilisant CSS
pour ajouter des icônes de police CSS impressionnantes à votre application...
// in .angular-cli.json
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css"
]
utilisant SASS
créer un fichier vide _variables.scss
dans src/
.
ajouter ce qui suit à _variables.scss
:
$fa-font-path : '../node_modules/font-awesome/fonts';
Dans styles.scss
ajouter ce qui suit:
@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';
Test
exécuter ng servir pour exécuter votre application en mode développement, et naviguer à http://localhost:4200 .
pour vérifier que la police Awesome a été configurée correctement, changez src/app/app.composant.code html pour la suite...
<h1>
{{title}} <i class="fa fa-check"></i>
</h1>
après avoir sauvegardé 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 CLI angulaire produit les fichiers font-awesome la racine dist comme par défaut le cli angulaire affiche les polices à la racine dist
, ce qui n'est d'ailleurs pas un problème du tout.
après quelques expérimentations j'ai réussi à obtenir le travail suivant:
-
Installer avec npm:
npm install font-awesome --save
-
ajouter à angulaires-cli-construire.js fichier:
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 fichier de police dans l'angular-cli-build.fichier js
.+(css / css.map / otf|eot|svg|ttf|woff/ woff2)
Edit: je suis en utilisant angulaire ^4.0.0 et de l'Électron ^1.4.3
si vous avez des problèmes avec ElectronJS ou similaire et avez une sorte d'erreur 404, une solution possible est d'utiliser votre webpack.config.js
, en ajoutant (et en supposant que vous avez le module font-awesome node installé par npm ou dans le paquet.fichier 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
comme sortie, et, 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 fonts vers le dossier dev assets.
- webpack copie le dossier dev assets vers le dossier
dist
assets folder
maintenant, quand le processus de construction sera terminé, l'application devra chercher le .scss
fichier et le dossier contenant les icônes, les résoudre correctement.
Pour les résoudre, j'ai utilisé ceci 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 fichier .scss
, j'importe la police-awesome .scss et définir le chemin des polices, qui est, encore une fois, dist/assets/font-awesome/fonts
. Le chemin est dist
parce que dans mon webpack.config la sortie.le chemin est défini comme helpers.root('src/app/dist');
Si, dans app.scss
:
$fa-font-path: "dist/assets/font-awesome/fonts";
@import "~font-awesome/scss/font-awesome.scss";
Notez que, de cette façon, il définira le chemin de police (utilisé plus tard dans le .fichier scss) et importer le .fichier scss utilisant ~font-awesome
pour résoudre la police-awesome path dans node_modules
.
C'est assez délicat, mais c'est le seul moyen que j'ai trouvé pour contourner l'erreur 404 problème avec les Électrons.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 déjà dit plusieurs fois, 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 les règles de la section:
,
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader?name=/assets/fonts/[name].[ext]'
}
Il y a beaucoup de bonnes réponses ici. Mais si vous avez tout essayé et toujours obtenir des carrés à la place des 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 l'emporte sur les polices fontawesome. Je viens de remplacer le sélecteur *
par body
a résolu mon problème:
body {
font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}
Pour Angle 6,
Première npm install font-awesome --save
ajouter node_modules/font-awesome/css/font-awesome.css
à angulaire.json .
Se souvenir de et non de pour ajouter des points devant le node_modules/
.
ce post décrit comment intégrer Fontawesome 5 dans Angular 6 (Angular 5 et versions précédentes fonctionneront aussi, mais alors vous devez ajuster mes Écritures)
Option 1: Ajouter les fichiers css
Pro: Chaque icône sera incluse
Contra: chaque icône sera incluse (plus grande taille d'application car toutes les polices sont incluses)
ajouter le paquet suivant:
npm install @fortawesome/fontawesome-free-webfonts
ajoutez ensuite les lignes suivantes à votre angle.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: colis angulaire
"Pro: Small app size
Contra: Vous devez inclure chaque icône que vous voulez utiliser separemment
utiliser le paquet angulaire 5 de FontAwesome:
npm install @fortawesome/angular-fontawesome
il suffit de suivre leur documentation pour ajouter les icônes. Ils utilisent les icônes svg, donc vous n'avez qu'à ajouter les SVG / icons, que vous utilisez vraiment.
en utilisant moins (pas SCSS) et Angular 2.4.0 et le Webpack standard (pas Angular CLI, ce qui suit a fonctionné pour moi:
npm install --save font-awesome
et (dans mon application.composant.moins):
@import "~font-awesome/less/font-awesome.less";
et bien sûr, vous pouvez avoir besoin de cet extrait évident et très intuitif (dans le module.chargeurs 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 le regexp correspond aux svg-references (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.
je voulais utiliser la police impressionnant 5 + et la plupart des réponses se concentrent sur les versions plus anciennes
pour la nouvelle police Awesome 5+ Le projet angular n'a pas encore été publié, donc si vous voulez faire usage des exemples mentionnés sur le site font awesome atm vous devez utiliser un travail autour. cents cinquante et une million neuf cent vingt mille neuf cent vingt"
je viens d'importer le cdn pour faire Awesome 5 dans mes styles.CSS. Juste ajouté cela au cas où il aide quelqu'un à trouver la réponse plus vite que moi: -)
Code de Style.css
@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";
si, pour une raison quelconque, vous ne pouvez pas installer package throw npm. Vous pouvez toujours éditer index.html et ajouter de la police génial CSS dans l'en-tête. Et puis, peu utilisé dans le projet.
pour webpack2 utiliser:
{
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]
j'ai perdu plusieurs heures à essayer D'obtenir la dernière version de FontAwesome 5.2.0 en travaillant avec AngularCLI 6.0.3 et la conception des matériaux. J'ai suivi les instructions d'installation du npm sur le site de FontAwesome
leurs derniers docs vous indiquent d'installer en utilisant ce qui suit:
npm install @fortawesome/fontawesome-free
après avoir perdu plusieurs heures, je l'ai finalement désinstallé et j'ai installé font awesome en utilisant la commande suivante (ceci installe FontAwesome v4.7.0 0):
npm install font-awesome --save
maintenant il fonctionne très 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>
ajoutez-le dans votre paquet.json comme "devDependencies" font-awesome : "numéro de version"
aller à la commande invite type commande npm que vous avez configurée.