ionic 3 项目中的字体真棒安装

Question

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

npm install font-awesome --save

这是 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"
    }

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

    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。我在 assets 和 fonts 文件夹中手动复制了这些文件，我可以在我的项目中使用 font-awesome，但我想知道为什么复制任务不起作用。

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

Answer 1

安装 Font Awesome

很简单：npm install font-awesome --save --save-exact

配置 Ionic 以包含 Font Awesome 在我们的应用中使用 Font Awesome 并不难……我们只需要：

1. 配置构建以复制 Font Awesome 字体
2. 配置构建以包含 Font Awesome sass 路径
3. 让 Font Awesome 样式可用于您的项目

配置构建

离子建筑系统可以轻松配置。如果您需要了解更多信息，可以查找信息here

1.配置复制任务 与其他所有任务一样，Ionic 复制任务是使用 JSON 对象配置的。这个 JSON 对象的每个属性都是一个复制子任务。对于每个子任务，都有一个源 src，它是一个目录和文件的数组，还有一个目标 dest,，它是您想要复制所有内容的路径。

一些占位符可以用作{{ROOT}} 用于根目录，{{WWW}} 用于目标目录。

这是我奇妙的config/copy.config.js 文件：

// New copy task for font files
module.exports = {
  copyFontAwesome: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  }
};

添加与默认 copyFonts 名称不同的属性允许只关注 fa 字体。离子建筑系统自动添加默认配置。

2。配置 sass 任务 Sass 包含路径是使用 sass 配置的 includePaths 属性配置的。

添加一个config/sass.config.js ：

// Adding Font Awesome to includePaths
module.exports = {
  includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/font-awesome/scss'
  ]
};

如您所见，我正在覆盖 includePaths 属性。如果你想让 sass 任务正常工作，你需要复制默认配置。

1. 启用自定义配置 启用自定义配置有多种方式，我选择将其添加到package.json config属性中。

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

使 Font Awesome 可用 要使用 Font Awesome，我们需要导入它。现在只需两行代码！

在src/theme/variables.scss 文件的末尾添加以下代码。

// Font Awesome
$fa-font-path: $font-path;
@import "font-awesome";

默认情况下，$fa-font-path 等于 ../fonts。我们将字体文件配置为复制到../assets/fonts，这是离子默认字体路径

使用 Font Awesome

用法

<!-- basic usage -->
<fa-icon name="camera-retro"></fa-icon>
<!-- basic usage with color -->
<fa-icon name="camera-retro" color="danger"></fa-icon>
<!-- larger icons -->
<fa-icon name="camera-retro" size="4x"></fa-icon>
<!-- fixed width icons -->
<fa-icon name="camera-retro" fixed-width></fa-icon>
<!-- dynamic value -->
<fa-icon [name]="icon"></fa-icon>
<!-- buttons -->
<button ion-button icon-left>
  <fa-icon name="group"></fa-icon>
  people
</button>

更多了解，请阅读此链接here

Answer 2

我也面临同样的问题，但通过以下步骤解决问题

1. 运行以下命令 => npm install --save font-awesome

2. 打开 src 文件夹下的 index.html 文件并粘贴 fontawesome.min.css

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

3. 在所有根文件所在的应用根目录上创建一个新文件夹名称脚本
4. 在脚本文件夹中创建一个名为 custom-libs.js 的新 js 文件

5. 然后将下面的代码粘贴到该文件中

   const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config');
   module.exports = Object.assign(existingConfig, {
     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'
    }});
   

6. 最后但并非最不重要的一步现在我们需要告诉 ionic 我们正在使用自定义复制 js，所以， 打开 package.json 文件并替换下面的代码

   “配置”：{ “ionic_copy”：“./scripts/custom-libs.js” }

现在我们可以运行ionic serve 命令并查看您的更改

Answer 3

您需要将文件复制到构建文件夹，然后从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'
},

在 index.html 中添加以下行：

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

Answer 4

在该目录中，我添加了从 node_modules/ionic/app-scripts/config/copy.config.js 复制的文件 copy.config.js，我在其中添加了这两个复制任务

更简洁的方法是制作您自己的文件并将您的自定义任务附加到原始配置中。这样您在更新应用脚本时就不必担心太多。

let originalConfig = require('@ionic/app-scripts/config/copy.config');

module.exports = Object.assign({}, originalConfig, {
  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'
  },
});

另外，您需要在 package.json 中指定您的自定义配置文件。您的步骤中缺少此内容。

"config": {
    "ionic_copy": "./config/custom.copy.js"
},

更新

如果你使用的是 font-awesome v5.x，你可以使用 angular-fontawesome 包并在你的项目中直接导入 FontAwesomeModule。

npm i @fortawesome/fontawesome-svg-core --save
npm i @fortawesome/free-solid-svg-icons --save //or any other category
npm i @fortawesome/angular-fontawesome --save

文档here

Answer 5

---

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

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

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

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

3 : 你的 global.scss 文件应该看起来像这样：

// 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>显示字体真棒图标

Answer 6

我以不同的方式安装了 font awesome。

第 1 步）添加到 node_modules/@ionic/app-scripts/config/sass.config.js

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

步骤 2) 添加到 variables.scss

@import "font-awesome";

第 3 步）将所需的字体真棒字体复制到构建区域。

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!")
  });

});

此时可能有更好的方法来执行第 3 步。