it-swarm.com.de

Verwenden von font-awesome in ionic 2

Wie kann ich fontawesome mit ionic 2 verwenden? Ich habe diesem Tutorial gefolgt - aber es funktioniert nicht.

18
mahmoudismail

Update in ionic 2 RC.0

  • Laden Sie die font-awesome Bibliothek herunter.
  • Erstellen Sie den Ordner "fonts" in src/assets und kopieren Sie die Schriftarten aus dem Ordner "font-awesome/fonts"
  • Kopieren Sie den Ordner scss und fügen Sie ihn unter src/theme/scss ein
  • Öffnen Sie die Datei variables.scss und kopieren Sie den folgenden Code

@import "scss/font-awesome"; @Schriftart {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 ('wahrer Typ'),
URL ('../ assets/fonts/fontawesome-webfont.svg? v = # {$ fa-version} #fontawesomeregular') Format ('svg'); Schriftgewicht: normal; font-style: normal; }

So fügen Sie Ihr Symbol in HTML ein

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

Ionic Beta

Installieren Sie fontAwesome aus der npm-Bibliothek. 

Ändern Sie die folgenden Änderungen in gulpfile.ts.

  • Fügen Sie gulp task zum Hinzufügen von Symbol-CSS und -Schriften zum Build hinzu 
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'))    
});
  • Ändern Sie wie folgt die Aufgabe "Gulp Build and Watch" (Hinzufügen Ihrer Schriftart Und css für watch and build) 
gulp.task('watch', ['clean'],  function(done){    
//existing ionic2 code 
} 
gulp.task('build', ['clean','myCss','myFonts'], function(done){   
//existing ionic2 code
}

Fügen Sie @import "../../node_modules/font-awesome/scss/font-awesome"; in app.core.scss ein

So fügen Sie Ihr Symbol in HTML ein 

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

font-awesome ionic 2-Integration nur mit Konfigurationsdateien.

  1. Font-awesome über npm herunterladen (npm install font-awesome --save)
  2. Fügen Sie in der Datei package.json aus Ihrem Projekt Folgendes hinzu: 

    "config": {
        "ionic_bundler": "webpack",
        "ionic_source_map": "source-map",
        "ionic_copy": "./config/copy.config.js",
        "ionic_sass": "./config/sass.config.js"
    }
    
  3. Erstellen Sie im Stammverzeichnis Ihres Projekts den Ordner config und kopieren Sie die Dateien copy.config.js und sass.config.js (diese Dateien befinden sich in (..\node_modules\@ionic\app-scripts\config)

  4. Ändern Sie die kopierten Dateien. Fügen Sie in sass.config.js den Verweis auf font-awesome hinzu Stellen Sie am Ende sicher, dass Sie etwas davon haben 

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

Der wichtigste Teil ist hier die letzte Zeile.

in copy.config füge folgendes hinzu:

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

Der wichtigste Teil hier ist dest '{{WWW}}/fonts/' und nicht {{WWW}}/assets/fonts/', da font-awesome.css Schriftarten in der "www/fonts"-Datei sucht.

  1. Und schließlich @import "font-awesome"; in variables.css (src\theme folder) hinzufügen

Nachdem Sie alle diese Schritte ausgeführt haben, können Sie font-awesome in Ihrem ionic 2-Projekt verwenden.

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

Es ist alles

23
Edward Campos

Ähnlich wie @Edward vorgeschlagen, aber es wäre ein bisschen sauberer

1) npm install font-awesome --save

2) In package.json hinzufügen

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

3) Erstellen Sie die folgenden Dateien auf der Stammebene Ihres Projekts und fügen Sie folgenden Inhalt hinzu.

In der Datei: ./config/copy.config.js Hinzufügen

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

In der Datei: ./config/sass.config.js Hinzufügen

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

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

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

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

Es gibt immer noch viele Verwirrung darüber, was sich beim Hinzufügen von FontAwesome zu einer ionic2-App am besten eignet. Ich habe ein Tutorial darüber geschrieben, um einige dieser Verwirrungen zu mildern. Ich hoffe, das hilft allen anderen, diese Informationen zu finden

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

2
Luis Cabrera

Update für Ionic 2, Ionic 3+: Nur ein Schritt:

Fügen Sie Ihrem index.html einen fantastischen Link hinzu.

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

Ich habe die meisten der obigen Antworten ausprobiert, aber sie waren entweder zu kompliziert oder hatten eine Einschränkung, als der Kern von Ionic2 aktualisiert wurde. Hier ist meine Lösung:

Es ist ein manuelles Upgrade von FA erforderlich, wenn eine neue Version herauskommt, aber ich muss nicht oft ein Upgrade durchführen, da ich nur einige ausgewählte Symbole verwende.

Ignorieren Sie die SASS-Dateien und kopieren Sie den Inhalt von\node_modules\font-awesome\fonts nach\src\assets\fonts. Kopieren Sie auch\node_modules\font-awesome\css\font-awesome.min.css an dieselbe Stelle.

Verweisen Sie die csss in Ihrer index.html-Datei wie folgt:

  <!--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" />

Um es zu benutzen, füge dies in den Scss der Seite ein:

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

und das in der html:

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

Und das sollte es sein ...

1
Rodney