1. 技术文章
  2. font-awesome installation in ionic 3 project

font-awesome installation in ionic 3 project

由 假装没事ソ 提交于 2019-12-10 19:20:00

问题


I am trying to install font-awesome in my ionic 3 project. I used the command : 

npm install font-awesome --save

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"
    }

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'
    },

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.


回答1:


Install Font Awesome

It’s quite easy: npm install font-awesome --save --save-exact

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

  1. configure the build to copy Font Awesome fonts
  2. configure the build to include Font Awesome sass path
  3. make Font Awesome styles available to your project

Configure the build

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

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.

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

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

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. Configure sass task Sass include paths are configure using the includePaths property of the sass configuration.

Add a config/sass.config.js with:

// 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'
  ]
};

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. Enabling the custom configuration There are several ways to enable custom configuration, I choose to add it to package.json config property.

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

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

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

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

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

Use Font Awesome

Usage

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




回答2:


I also face the same problem but solve the problem by these steps below

  1. Run the following command => npm install --save font-awesome

  2. Open your index.html file under src folder and paste fontawesome.min.css

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

  3. Create a new folder name scripts on your app root where is all root file located
  4. Create a new js file having name custom-libs.js inside scripts folder

  5. Then paste below code into that file 

    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. Last but not the least step now we need to tell ionic we are using custom copy js so, open package.json file and replace below code

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

Now we are good to go run ionic serve command and see your changes




回答3:


You need to copy the files to the build folder then call them from the 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 add the following line:

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



回答4:


I installed font awesome in a different way.

Step 1) Add to 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'
  ],

Step 2) Add to variables.scss

@import "font-awesome";

Step 3) Copy the required font awesome fonts to build area.

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!")
  });

});

At this point there is probably a better way to do step 3.




回答5:


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

The cleaner way is to make your own file and append your custom tasks to the original configuration. That way you don't have to worry much when you update the app scripts.

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

Also, you need to specify your custom config file in package.json. This is missing in your steps.

"config": {
    "ionic_copy": "./config/custom.copy.js"
},

Update

If you are using font-awesome v5.x, you can use angular-fontawesome package and import the FontAwesomeModule directly in your project.

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

Documentation here




回答6:


This is how I solved the problem:

1 : Run npm install font-awesome --save (Installs font awesome locally)

2 : Open globals.scss of your project i.e. src/global.scss. And paste the following lines :

$fa-font-path : "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

3 : Your global.scss file should look something like this after that:

// 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";

Try displaying font awesome icon with this <i primary class="fa fa-cart-plus fa-lg"></i>



来源：https://stackoverflow.com/questions/47617601/font-awesome-installation-in-ionic-3-project

标签
css
angular
ionic-framework
ionic2
ionic3
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!