Wie benutzt man Fontawesome in ionic 2 rc0?

Question

Wie zu verwenden fontawesome in ionic 2 rc0 als es gibt keine gulp/grunt Datei, so dass ich Datei in Build-Prozess hinzufügen kann?

Answer 1

einfach CDN CSS Link von Schrift awesome index.html

hinzufügen Sie können auch @import von Sass hinzufügen es zu einem Projekt

@import 'lib/fa.css' 

Answer 2

Es gibt immer noch eine Menge Verwirrung verwenden auf Was ist eine Best Practice, wenn es darum geht, FontAwesome einer ionic2-App hinzuzufügen? Also habe ich einen Artikel darüber geschrieben, um einige dieser Verwirrungen zu mildern. Ich hoffe, das hilft jedem anderen auf der Suche nach einer richtigen Antwort http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

Answer 3

Hier ist ein Artikel, ich stieß bei der Suche nach dem gleichen Thema.

https://chriztalk.com/ionic-2-font-awesome-using-sass/

Hier ist ein Kern:

1. Machen Sie die Wurzel Ihres ionischen 2-Projekt ein neues Konfigurationsverzeichnis:

   $ mkdir config 
   

2. Die copy.config.js und sass.config.js Dateien in diesen Ordner: /node_modules/@ionic/app-scripts/config/ an d Kopieren Sie sie in den Ordner, den Sie gerade erstellt haben.

3. diese Zeilen an den neuen copy.config.js in config Verzeichnis hinzufügen Sie gerade erstellt haben.

   ... 
   copyFontAwesomeCSS: { 
       src: '{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css', 
       dest: '{{WWW}}/assets/css/' 
   }, 
   copyFontAwesome: { 
       src: '{{ROOT}}/node_modules/font-awesome/fonts/**/*', 
       dest: '{{WWW}}/fonts/' 
   }, 
   ... 
   

4. diese Zeilen an den includePaths[] Block der soeben erstellten sass.config.js Datei im config Verzeichnis hinzufügen Sie:

   ... 
   includePaths: [ 
       ... 
       'node_modules/font-awesome/scss', 
       ... 
   ], 
   ... 
   

5. einen Konfigurationsblock in Ihrer package.json Datei mit folgendem hinzufügen Referenzen:

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

6. Import font-awesome in Ihrer app.scss Datei:

   ... 
   @import 'font-awesome'; 
   ... 
   

7. Schließlich genial Schiftpakete, wie Sie es in einem beliebigen HTML-Datei:

   <h1><i class="fa fa-flag" aria-hidden="true"></i>&nbsp; Font Awesome</h1>