离子3项目中的font-awesome安装 [英] font-awesome installation in ionic 3 project

问题描述

我正在尝试在我的离子3项目中安装font-awesome。
我使用了命令：

I am trying to install font-awesome in my ionic 3 project. I used the command :

npm install font-awesome --save

以下是package.json文件的内容

Here is the content of the package.json file

    {
       "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"
    }

安装完成后，我创建了一个名为 config 的目录项目文件夹的根目录。在该目录中，我添加了从node_modules / ionic / app-scripts / config / copy.config.js复制的文件 copy.config.js ，其中我添加了这两个复制任务：

After installation, I created a directory called config in the root of the project folder. In that directory, i added the file copy.config.js copied from node_modules/ionic/app-scripts/config/copy.config.js, in which i added these two copy tasks :

    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'
    },

但不幸的是，副本没有制作，所有必要的文件都没有复制到assets / fonts和assets / css。我在资产和字体文件夹中手动复制了这些文件，我可以在我的项目中使用font-awesome，但我想知道为什么复制任务不起作用。

But unfortunately, the copy is not made, and all the necessary files are not copied to assets/fonts and assets/css. I copied theses files manually in the assets and fonts folders and I can use font-awesome in my project, but I would like to know why the copy tasks does not work.

任何帮助都会有用。谢谢。

Any help will be useful. Thanks.

推荐答案

---

这就是我解决问题的方法：

---

This is how I solved the problem:

1：运行 npm install font-awesome --save （在本地安装字体很棒）

1 : Run npm install font-awesome --save (Installs font awesome locally)

2：打开项目的 globals.scss ，即 src / global.scss 。并粘贴以下行：

2 : Open globals.scss of your project i.e. src/global.scss. And paste the following lines :

$fa-font-path : "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

3：之后你的global.scss文件应如下所示：

3 : Your global.scss file should look something like this after that:

// http://ionicframework.com/docs/theming/"

$fa-font-path : "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/colors.css";

@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

尝试使用此显示字体真棒图标< i primary class =fa fa-cart-plus fa-lg>< / i>

这篇关于离子3项目中的font-awesome安装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！