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

安装字体真棒

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

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

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

配置构建

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

1. 配置复制任务 Ionic 复制任务与其他所有任务一样，使用 JSON 对象进行配置。这个 JSON 对象的每个属性都是一个复制子任务。对于每个子任务，都有一个 source src，即目录和文件的数组，以及一个 destination 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 包含路径是使用includePathssass 配置的属性来配置的。

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

3. 启用自定义配置 启用自定义配置的方法有多种，我选择将其添加到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这是ionic默认字体路径

使用字体真棒

用法

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

更多了解，请在此处阅读此链接