Question

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

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

Answer 1

安装真棒字体

这很容易：npm install font-awesome --save --save-exact

配置Ionic以包括Font Awesome 在我们的应用程序中提供“真棒字体”并不难……我们只需要：

配置内部版本以复制Font Awesome字体
将构建配置为包括Font Awesome sass路径
为项目提供Font Awesome样式

配置内部版本

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

1。配置复制任务 与其他任务一样，离子复制任务也是使用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配置的includePaths属性来配置Sass包含路径。

添加一个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任务正常运行，则需要复制默认配置。

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

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

使字体真棒可用 要使用“真棒字体”，我们需要将其导入。现在只需两行代码即可！

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

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

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

使用超赞字体

用法

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

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

运行以下命令=> npm install --save font-awesome
打开 src 文件夹下的 index.html 文件并粘贴fontawesome.min.css

<link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
在所有根文件所在的应用根目录上创建新的文件夹名称脚本
在脚本文件夹

custom-libs.js

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

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'
 }});

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

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

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

Answer 3

您需要将文件复制到build文件夹，然后从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

我以不同的方式安装了字体。

步骤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"
},

复制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步。

Answer 5

在该目录中，我添加了从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"
},

更新

如果您使用的是超棒的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 6

这是我解决问题的方法：

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>

显示字体真棒图标

离子3项目中的font-awesome安装

6 个答案: