css - ionic 3元素中的 Font Awesome 安装

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 样式

配置构建

Ionic 构建系统可以很容易地配置。如果您需要了解更多信息，可以查找信息 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 字体。 Ionic 构建系统自动添加默认配置。

<强>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 属性中。

   “配置”:{
"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>

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