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

2022-01-21 00:00:00 css ionic-framework ionic3 angular ionic2

我正在尝试在我的 ionic 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.我在 assets 和 fonts 文件夹中手动复制了这些文件，我可以在我的项目中使用 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.

推荐答案

安装 Font Awesome

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

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

Configure Ionic to include Font Awesome Making Font Awesome available in our app is not that hard… we just need to:

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

配置构建

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

Ionic building system can be easily configured.If you need to know more about it, you can find informations here

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

1. Configure copy task The Ionic copy task, as every other tasks, is configured using a JSON object. Each property of this JSON object is a copy sub-task. For each sub-task, there is a source src, that is an array of directories and files, and a destination dest, that is a path to where you want to copy everything.

一些占位符可以用作根目录的{{ROOT}}和目标目录的{{WWW}}.

Some placeholder can be use as {{ROOT}} for root directory and {{WWW}} for target directory.

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

Here is my marvellous config/copy.config.js file:

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

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

Adding a property with a different name than the default copyFonts allows to only take care about fa fonts. Ionic building system automatically adds default configuration.

<强>2.配置 sass 任务Sass 包含路径是使用 sass 配置的 includePaths 属性配置的.

2. Configure sass task Sass include paths are configure using the includePaths property of the sass configuration.

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

As you can see, I’m overriding the includePaths property. you need to copy default config if you want the sass task to work properly.

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

<代码>配置":{"ionic_copy": "./config/copy.config.js",ionic_sass":./config/sass.config.js"}

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

Make Font Awesome available To use Font Awesome, we need to import it. It’s now simple as two lines of code !

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

Add the code below at the end of your src/theme/variables.scss file.

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

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

By default, $fa-font-path equals to ../fonts. We configured fonts file to be copied to ../assets/fonts which is the ionic default font path

使用 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>

更多了解，请阅读此链接 这里

More learn about , please read this link here

相关文章