How can I add Font Awesome to my Aurelia project using npm?

Question

I have been following the Contact Manager tutorial and would like to add Font Awesome to the project. Here\'s what I have done so far:

• npm insta

Answer 1

Simple default settings method

Here are the 4 simple steps I use to bring in Font-Awesome to an Aurelia project that uses the CLI.

1) npm install font-awesome --save

2) add copyFiles to build of aurelia.json

"build": {
    "copyFiles": {
      "node_modules/font-awesome/fonts/*": "/fonts/"
    },

3) add bundling to dependencies array of aurelia.json

"dependencies": [
{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome/css",
    "main": "font-awesome.css"
},

4) include the import for the css file (mine lives in the app.html)

<require from="font-awesome.css"></require>

=========================================================================

Alternative

Specifying a custom font location

As I was serving my files from a different location I needed to be able to tweek the font location configured. As such, below are the steps involved if you need to do the same and specify where the fonts are stored. I am using .less

1, 2) As above.

3) Instead of adding to the bundling, you need to reference the font-awesome less file within your own less file (mine is called site.less) and then set the @fa-font-path to your custom location.

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

4) There is no 4, with this method as long as you have your own compiled equivalent site.css file referenced already (with the import) you don't need to add anything else.

Answer 2

For those who wish to use the sass version of font-awesome

1) Install font-awesome

npm install font-awesome --save

2) Copy font-awesome's fonts to your project root directory

cp -r node_modules/font-awesome/fonts .

3) Include the font-awesome sass directory in the aurelia css processor task

# aurelia_project/tasks/process-css.js
export default function processCSS() {
  return gulp.src(project.cssProcessor.source)
    .pipe(sourcemaps.init())
    .pipe(sass({
      includePaths: [
        'node_modules/font-awesome/scss'
      ]
    }).on('error', sass.logError))
    .pipe(build.bundle());
};

4) Import font-awesome in your app scss

# src/app.scss    
@import 'font-awesome';

5) Require your app scss in your html

# src/app.html
<template>
  <require from="./app.css"></require>
</template>