web-dev-qa-db-fra.com

Utilisation de font-awesome dans ionic 2

Comment utiliser fontawesome avec ionic 2, j'ai suivi ce tutoriel mais cela ne fonctionne pas.

iconsfont-awesomeionic2
18
mahmoudismail

Mise à jour dans ionic 2 RC.0

  • Téléchargez la bibliothèque font-awesome.
  • Créez le dossier "fonts" dans src/assets et copiez les fontes du dossier font-awesome/fonts
  • Copiez le dossier scss et collez-le sous src/theme/scss
  • Ouvrez le fichier variables.scss et copiez le code ci-dessous.

@import "scss/font-awesome"; @ font-face {font-family: 'FontAwesome'; src: url ('../ assets/fonts/fontawesome-webfont.eot? v = # {$ fa-version}');
src: URL ('../ assets/fonts/fontawesome-webfont.eot? # iefix & v = # {$ fa-version}') format ('embedded-opentype'),
url ('../ assets/fonts/fontawesome-webfont.woff2? v = # {$ fa-version}') format ('woff2'),
url ('../ assets/fonts/fontawesome-webfont.woff? v = # {$ fa-version}') format ('woff'),
url ('../ assets/fonts/fontawesome-webfont.ttf? v = # {$ fa-version}') format ('TrueType'),
url ('../ assets/fonts/fontawesome-webfont.svg? v = # {$ fa-version} #fontawesomeregular') format ('svg'); poids de la police: normal; style de police: normal; }

Pour inclure votre icône en HTML

  <i primary class="fa fa-cart-plus fa-lg"></i>

Bêta ionique

Installez fontAwesome à partir de la bibliothèque npm. 

Modifiez les modifications ci-dessous dans votre fichier gulpfile.ts.

  • Inclut la tâche gulp pour ajouter des icônes et des polices à votre construction 
gulp.task('myCss', function(){   
     return gulp.src('path-to-your-font-lib/style.css')
         .pipe(gulp.dest('www/build/css'))    
});  
gulp.task('myFonts', function(){   
    return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
         .pipe(gulp.dest('www/build/fonts'))    
});
  • Modifiez votre tâche de construction et de surveillance gulp comme suit (Ajout de votre police Et de css sous surveillance et création) 
gulp.task('watch', ['clean'],  function(done){    
//existing ionic2 code 
} 
gulp.task('build', ['clean','myCss','myFonts'], function(done){   
//existing ionic2 code
}

Inclure @import "../../node_modules/font-awesome/scss/font-awesome"; dans app.core.scss fichier

Pour inclure votre icône en HTML 

  <i primary class="fa fa-cart-plus fa-lg"></i>
30
AishApp

Intégration ionic 2 de font-awesome uniquement avec les fichiers de configuration.

  1. Téléchargez font-awesome via npm (npm install font-awesome --save)

  2. Dans le fichier package.json de votre projet, ajoutez ceci: 

    "config": {
    "ionic_bundler": "webpack",
    "ionic_source_map": "source-map",
    "ionic_copy": "./config/copy.config.js",
    "ionic_sass": "./config/sass.config.js"
}

  3. Dans le dossier racine de votre projet, créez un dossier de configuration et copiez les fichiers copy.config.js et sass.config.js (ces fichiers se trouvent dans (..\node_modules\@ionic\app-scripts\config)

  4. Modifier les fichiers copiés. Dans sass.config.js, ajoutez la référence à font-awesome, À la fin, vérifiez que vous disposez de quelque chose comme ceci. 

    includePaths: [ 'node_modules/ionic-angular/themes', 'node_modules/ionicons/dist/scss', 'node_modules/ionic-angular/fonts', 'node_modules/font-awesome/scss' ],

La partie la plus importante ici est la dernière ligne.

dans copy.config ajouter ceci:

copyFontAwesome:{
    src: 'node_modules/font-awesome/fonts/',
    dest: '{{WWW}}/fonts/'
}

La partie la plus importante ici est dest '{{WWW}}/fonts/' et non pas {{WWW}}/assets/fonts/', mais parce que font-awesome.css recherche les polices dans le fichier "www/fonts".

  1. Et enfin, ajoutez @import "font-awesome"; dans variables.css (src\theme folder)

Après avoir exécuté toutes ces étapes, vous pouvez utiliser font-awesome dans votre projet ionic 2.

<i class="fa fa-circle" style="color:#14afef; font-size: small"></i>

C'est tout

23
Edward Campos

Une approche similaire à celle suggérée par @Edward, mais une manière un peu plus simple de le faire serait:

1) npm install font-awesome --save

2) Dans package.json, ajoutez

"ionic_copy": "./config/copy.config.js", "ionic_sass": "./config/sass.config.js",

3) Créez les fichiers ci-dessous au niveau racine de votre projet et ajoutez le contenu suivant.

Dans le fichier: ./config/copy.config.js Add

const copyConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
copyConfig.copyFonts.src.Push('{{ROOT}}/node_modules/font-awesome/fonts/**/*');

Dans le fichier: ./config/sass.config.js Add

const sassConfig = require('../node_modules/@ionic/app-scripts/config/sass.config');

sassConfig.includePaths.Push('node_modules/font-awesome/scss');

4) Dans ./src/theme/variables.scss

$fa-font-path: "../assets/fonts";
@import 'font-awesome';
8
BBios

Il existe encore beaucoup de confusion quant à la meilleure pratique à suivre pour ajouter FontAwesome à une application ionic2. J'ai écrit un tutoriel à ce sujet pour atténuer une partie de cette confusion. J'espère que cela aide les autres à la recherche de cette information

http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

2
Luis Cabrera

Mise à jour pour Ionic 2, Ionic 3+: une seule étape:

Ajouter un lien font-génial à votre index.html

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
1
Duannx

J'ai essayé la plupart des réponses ci-dessus, mais elles étaient trop compliquées ou avaient une limitation lorsque le noyau de Ionic2 a été mis à niveau. Voici donc ma solution:

Cela nécessite une mise à niveau manuelle de FA lorsqu'une nouvelle version est disponible, mais je n'ai pas besoin de mettre à niveau souvent car je n'utilise que quelques icônes.

Ignorez les fichiers SASS et copiez le contenu de\node_modules\font-awesome\fonts dans\src\assets\fonts. Copiez également\node_modules\font-awesome\css\font-awesome.min.css au même endroit.

Référencez le fichier csss dans votre fichier index.html comme ceci:

  <!--Custom Fonts-->
  <link href="assets/fonts/comfortaa/comfortaa.css" rel="stylesheet" />
  <link href="assets/fonts/gloriahallelujah/gloriahallelujah.css" rel="stylesheet" />
  <link href="assets/fonts/font-awesome.min.css" rel="stylesheet" />

Ensuite, pour l'utiliser, mettez ceci dans le scss de la page:

  .logo-text {
    font-family: 'comfortaa-bold';
  }

et ceci dans le HTML:

<h4 class="white-text slogan-text">Come bien a la mitad de precio</h4>

Et ça devrait être ça ...

1
Rodney