小贝子编程

Ionic 3项目中的字体令人陶醉的安装



我正在尝试在我的离子3项目中安装字体令人陶醉。我使用了命令：

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 的目录。在该目录中，我添加了文件 copy.config.js 从node_modules/ionic/ionic/app-scripts/config/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'
    },

，但不幸的是，副本不是制作的，所有必要的文件均未复制到资产/字体和资产/CSS中。我在资产和字体文件夹中手动复制了这些文件，我可以在项目中使用字体Awesome，但是我想知道为什么复制任务不起作用。

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

安装字体很棒

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

配置离子以包含字体很棒使我们的应用中的字体很棒并不难……我们只需要：

  1. 配置构建以复制字体很棒的字体
  2. 将构建配置为包括字体真棒路径
  3. 使您的项目可以使用字体真棒样式

配置构建

离子构建系统可以很容易地配置。如果您需要更多地了解它，则可以在此处找到信息

1。配置复制任务与其他所有任务一样，离子复制任务是使用JSON对象配置的。此JSON对象的每个属性都是复制子任务。对于每个子任务，都有一个源src，即目录和文件数组，而目标dest,是您要复制所有内容的途径。

某些占位符可以用作root目录的{{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" }

使字体很棒可用 要使用Avesome，我们需要导入它。现在很简单，因为两行代码！

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

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

我也遇到了同样的问题，但通过以下这些步骤解决了问题

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

  2. 打开您的 index.html src 文件夹和paste fontawesome.min.css

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

  3. 在您的应用程序root上创建一个新的文件夹名称脚本，所有root File都位于
  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 文件，替换下面的代码

    " config"：{ " ionic_copy"：" ./scripts/custom-libs.js" }

现在，我们很高兴运行ionic serve命令并查看您的更改

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

in index.html 添加以下行：

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

在该目录中，我添加了文件copy.config.js，从node_modules/ionic/ionic/app-scripts/config/config/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"
},

update

如果您使用的是Font-Awesome V5.x，则可以使用Angular-Fondawesome软件包并直接在项目中导入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

文档此处

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

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>

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

步骤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）添加到变量。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。

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium