font-awesome Installation in ionic 3 Projekt

Ich versuche Font-awesome in meinem ionischen 3-Projekt zu installieren. ich den Befehl:font-awesome Installation in ionic 3 Projekt

npm install font-awesome --save

Hier ist der Inhalt der Datei package.json

{ 
     "name": "ionic-hello-world", 
     "version": "0.0.0", 
     "author": "Ionic Framework", 
     "homepage": "http://ionicframework.com/", 
     "private": true, 
     "scripts": { 
     "clean": "ionic-app-scripts clean", 
     "build": "ionic-app-scripts build", 
     "lint": "ionic-app-scripts lint", 
     "ionic:build": "ionic-app-scripts build", 
     "ionic:serve": "ionic-app-scripts serve" 
     }, 
     "config": { 
     "ionic_copy": "./config/copy.config.js" 
     }, 
     "dependencies": { 
     "@angular/common": "4.1.3", 
     "@angular/compiler": "4.1.3", 
     "@angular/compiler-cli": "4.1.3", 
     "@angular/core": "4.1.3", 
     "@angular/forms": "4.1.3", 
     "@angular/http": "4.1.3", 
     "@angular/platform-browser": "4.1.3", 
     "@angular/platform-browser-dynamic": "4.1.3", 
     "@ionic-native/camera": "^3.13.1", 
     "@ionic-native/core": "3.10.2", 
     "@ionic-native/network": "^4.2.1", 
     "@ionic-native/splash-screen": "3.10.2", 
     "@ionic-native/status-bar": "3.10.2", 
     "@ionic/storage": "2.0.1", 
     "angularfire2": "^4.0.0-rc0", 
     "firebase": "^3.9.0", 
     "font-awesome": "^4.7.0", 
     "ionic-angular": "3.4.2", 
     "ionicons": "3.0.0", 
     "promise-polyfill": "^6.0.2", 
     "rxjs": "5.4.0", 
     "sw-toolbox": "3.6.0", 
     "typings": "^2.1.1", 
     "zone.js": "0.8.12" 
     }, 
     "devDependencies": { 
     "@ionic/app-scripts": "1.3.7", 
     "typescript": "2.3.3" 
     }, 
     "cordovaPlugins": [ 
     "cordova-plugin-whitelist", 
     "cordova-plugin-console", 
     "cordova-plugin-statusbar", 
     "cordova-plugin-device", 
     "cordova-plugin-splashscreen", 
     "ionic-plugin-keyboard" 
     ], 
     "cordovaPlatforms": [], 
     "description": "loginApp: An Ionic project" 
    }

Nach der Installation habe ich ein Verzeichnis Config in der Wurzel des Projektordner genannt. In diesem Verzeichnis hinzugefügt ich die Datei copy.config.js von node_modules kopiert/ionischer/app-scripts/config/copy.config.js, in denen ich hinzugefügt diese beiden Kopieraufgaben:

copyFontawesomeFonts: { 
     src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'], 
     dest: '{{WWW}}/assets/fonts' 
    }, 
    copyFontawesomeCss: { 
     src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'], 
     dest: '{{WWW}}/assets/css' 
    },

Aber Leider wird die Kopie nicht erstellt, und alle notwendigen Dateien werden nicht in Assets/Fonts und Assets/CSS kopiert. Ich habe diese Dateien manuell in den Ordnern für Assets und Schriftarten kopiert und kann font-awesome in meinem Projekt verwenden, aber ich würde gerne wissen, warum die Kopieraufgaben nicht funktionieren.

Jede Hilfe wird nützlich sein. Vielen Dank.

Quelle

2017-12-03 THE HOLLY SPIRIT

Sie müssen die Dateien in den Build-Ordner kopieren sie dann rufen Sie aus dem index.html:

copyFontawesomeFonts: { 
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'], 
    dest: '{{BUILD}}/assets/fonts' 
}, 
copyFontawesomeCss: { 
    src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'], 
    dest: '{{BUILD}}/assets/css' 
},

In index.html die folgende Zeile hinzufügen:

<head> 
... 
    <link rel="stylesheet" href="build/assets/css/font-awesome.min.css"> 
... 
</head>

Quelle

2017-12-04 00:48:15 Melchia

Vielen Dank für Ihren Beitrag zu tun. –

I Schriftart installiert ehrfürchtige auf andere Weise.

Schritt 1) In

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

Schritt 2) In

@import "font-awesome";

Schritt 3) bis node_modules/@ionic/app-scripts/config/sass.config.js variables.scss Kopieren Sie die benötigten Schriftarten, um den Bereich zu erstellen.

package.json

"config": { 
    "ionic_copy": "./copy-from.js" 
},

copy-from.js

var fs = require('fs-extra') 

// we will add config later here, right now the translation files are not being copied even though 
// they are in assets. 
var dependencies = [ 
    ['node_modules/font-awesome/fonts/', 'www/fonts'] 
]; 

console.log('Executing application custom copies...', dependencies); 
dependencies.forEach(function (value) { 
    fs.copy(value[0], value[1], function (err) { 
    if (err) return console.error(err) 
    console.log("success!") 
    }); 

});

An dieser Stelle gibt es wahrscheinlich einen besseren Weg, Schritt 3.

Quelle

2017-12-04 05:30:29

Vielen Dank für Ihren Beitrag. –

font-awesome Installation in ionic 3 Projekt

Antwort

Verwandte Themen