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

Asked 1/9, 2016 at 12:21 Answered 19/7, 2017 at 15:39

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 install Font-Awesome --save
Added the following to aurelia.jsonunder the dependencies array of the vendor-bundle.js:

...
{
    "name": "font-awesome",
    "path": "../node_modules/font-awesome",
    "resources": [
      "css/font-awesome.min.css"
    ]
},
...

But when running au run --watch I get the error:

error C:\Users\node_modules\font-awesome.js

Why is it looking for the .js file?

Practical answered 1/9, 2016 at 12:21 Comment(1)

It looks like the Aurelia framework expects everything in the bundles section of the JSON to be a module, with a JS file. Since Font Awesome does not have a JS file, it looks like you don't have to include it in the bundles, just do the <require from=""> and use the full path to the Font Awesome CSS files. – Groome 1/9, 2016 at 13:54

Don't add font-awesome resources to aurelia.json - you'd need font files too, which Aurelia don't process. Instead, take the following steps.

First, if you added anything for font-awesome already to your aurelia.json file, remove it again.

Add new file prepare-font-awesome.js in folder \aurelia_project\tasks and insert the below code. It copies font-awesome resource files to output folder (as configured aurelia.json config file; e.g. scripts):

import gulp from 'gulp';
import merge from 'merge-stream';
import changedInPlace from 'gulp-changed-in-place';
import project from '../aurelia.json';

export default function prepareFontAwesome() {
  const source = 'node_modules/font-awesome';

  const taskCss = gulp.src(`${source}/css/font-awesome.min.css`)
    .pipe(changedInPlace({ firstPass: true }))
    .pipe(gulp.dest(`${project.platform.output}/css`));

  const taskFonts = gulp.src(`${source}/fonts/*`)
    .pipe(changedInPlace({ firstPass: true }))
    .pipe(gulp.dest(`${project.platform.output}/fonts`));

  return merge(taskCss, taskFonts);
}

Open the build.js file in the \aurelia_project\tasks folder and insert the following two lines; this will import the new function and execute it:

import prepareFontAwesome from './prepare-font-awesome'; // Our custom task

export default gulp.series(
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS,
    prepareFontAwesome // Our custom task
  ),
  writeBundles
);

Finally, in the <head> section of your index.html file, just add the following line:

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

That's all; now you can use font-awesome icons in any Aurelia view modules (html files).

Note that this works for any complex third party library which requires resources which you have to manually include.

Rawlinson answered 17/9, 2016 at 8:21 Comment(8)

This seems to be the easiest way to achieve the result. – Garda 17/9, 2016 at 10:21

Running on Cent OS 7, using Aurelia Cli, I had to change \\ to / in the .js but otherwise worked like a charm! Thank you! – Nobles 28/10, 2016 at 8:40

This works. If you're using TypeScript change the top lines to: import * as gulp from 'gulp'; import * as merge from 'merge-stream'; import * as changedInPlace from 'gulp-changed-in-place'; import * as project from '../aurelia.json'; – Roddie 27/1, 2017 at 14:56

Using Aurelia CLI and I get file not found: localhost:9000/scripts/css/font-awesome.min.css – Rodrickrodrigez 7/2, 2017 at 21:6

Checkout aurelia.json config file for project.platform.output folder. Or you can directly setup output folder in that script. – Rawlinson 8/2, 2017 at 9:46

"output": "scripts", what am i supposed to do:P? – Rodrickrodrigez 8/2, 2017 at 18:48

You need to checkout paths: for source css-file (if wrong then it will be log error on build); for dest css-file in index.html. Find output folder and check where are that css-file copied on real system. – Rawlinson 9/2, 2017 at 7:58

This also seems to work for other fonts in npm, like mdi (material design icons). – Katerinekates 14/5, 2017 at 19:49

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.

Hitchcock answered 19/7, 2017 at 15:39 Comment(1)

I think this is the easiest way as of now. You could slim down the copyFiles section even more with "node_modules/font-awesome/fonts/*": "/fonts/" – Priory 13/2, 2018 at 8:50

Funny I was trying to get the same thing working this morning. This is all I had to do in my aurelia.json dependencies for it to work:

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

Then in my html I had:

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

Meister answered 1/9, 2016 at 17:56 Comment(2)

Aaah of course! not setting the main defaults to loading the .js duh! Thanks :-) – Practical 1/9, 2016 at 18:41

If you do that then you need to manually put font files to ..\font-awesome\fonts folder of your site. – Rawlinson 17/9, 2016 at 8:25

Not actually answering to your question of how to integrate Font Awesome in your application using NPM, but there is an alternative, clean way to get it in your application: using the CDN.

As mentioned in other answers, Aurlia currently doesn't support bundling resources other than js, css and html out-of-the-box using the CLI. There's a lot of discussion about this subject, and there are several, mostly hacky, workarounds, like some suggested here.

Rob Eisenberg says he's planning on getting it properly integrated in the Aurelia CLI, but he considers it low priority because there's a simple workaround. To quote him:

Of course there is interest in addressing this. However, it's lower priority than other things on the list for the CLI, in part because a simple link tag will fix the problem and is much easier than the work we would have to do to solve this inside the CLI.

Source: https://github.com/aurelia/cli/issues/248#issuecomment-254254995

Get your unique CDN link mailed here: http://fontawesome.io/get-started/
Include this link in the head of your index html file
Don't forget to remove everything you might have already added to try to get it working: the npm package (and its reference in your package.json), the reference in your aurelia.json file, any custom tasks you might have created, any <require> tags,...

Bonucci answered 27/10, 2016 at 10:38 Comment(1)

That's for the info, This won't help my scenario where I am developing for enterprise and cannot use external CDNs or dependencies; I have upvoted you regardless. – Practical 27/10, 2016 at 13:34

importing css/fonts automagicly is now supported.

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

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

Checkout this "Issue" https://github.com/aurelia/cli/issues/249
Happy codding

EDIT

I realized/read the comments this does not copy the font files. Here is an updated build script (es6) that will copy any resources and add the folder to the git ignore. If you want the typescript version check here
https://github.com/aurelia/cli/issues/248#issuecomment-253837412

./aurelia_project/tasks/build.js

import gulp from 'gulp';
import transpile from './transpile';
import processMarkup from './process-markup';
import processCSS from './process-css';
import { build } from 'aurelia-cli';
import project from '../aurelia.json';
import fs from 'fs';
import readline from 'readline';
import os from 'os';

export default gulp.series(
  copyAdditionalResources,
  readProjectConfiguration,
  gulp.parallel(
    transpile,
    processMarkup,
    processCSS
  ),
  writeBundles
);

function copyAdditionalResources(done){
  readGitIgnore();
  done();
}

function readGitIgnore() {
  let lineReader = readline.createInterface({
    input: fs.createReadStream('./.gitignore')
  });
  let gitignore = [];

  lineReader.on('line', (line) => {
    gitignore.push(line);
  });

  lineReader.on('close', (err) => {
    copyFiles(gitignore);
  })
}

function copyFiles(gitignore) {
  let stream,
    bundle = project.build.bundles.find(function (bundle) {
      return bundle.name === "vendor-bundle.js";
    });

  // iterate over all dependencies specified in aurelia.json
  for (let i = 0; i < bundle.dependencies.length; i++) {
    let dependency = bundle.dependencies[i];
    let collectedResources = [];
    if (dependency.path && dependency.resources) {
      // run over resources array of each dependency
      for (let n = 0; n < dependency.resources.length; n++) {
        let resource = dependency.resources[n];
        let ext = resource.substr(resource.lastIndexOf('.') + 1);
        // only copy resources that are not managed by aurelia-cli
        if (ext !== 'js' && ext != 'css' && ext != 'html' && ext !== 'less' && ext != 'scss') {
          collectedResources.push(resource);
          dependency.resources.splice(n, 1);
          n--;
        }
      }
      if (collectedResources.length) {
        if (gitignore.indexOf(dependency.name)< 0) {
          console.log('Adding line to .gitignore:', dependency.name);
          fs.appendFile('./.gitignore', os.EOL + dependency.name, (err) => { if (err) { console.log(err) } });
        }

        for (let m = 0; m < collectedResources.length; m++) {
          let currentResource = collectedResources[m];
          if (currentResource.charAt(0) != '/') {
            currentResource = '/' + currentResource;
          }
          let path = dependency.path.replace("../", "./");
          let sourceFile = path + currentResource;
          let destPath = './' + dependency.name + currentResource.slice(0, currentResource.lastIndexOf('/'));
          console.log('Copying resource', sourceFile, 'to', destPath);
          // copy files
          gulp.src(sourceFile)
            .pipe(gulp.dest(destPath));
        }
      }
    }
  }
}


function readProjectConfiguration() {
  return build.src(project);
}

function writeBundles() {
  return build.dest();
}

Conklin answered 20/12, 2016 at 7:24 Comment(2)

I tried it with a new project i created with Aurelia-cli 0.23.0 and it didn't work. – Madeira 21/12, 2016 at 13:33

because it failed to find the font files. (i still need to copy them from node_modules manually or via script – Madeira 21/12, 2016 at 13:44

I believe that bundles.dependencies section is for referencing JS libraries.

In your case, a bit of additional work will be needed. According to Aurelia CLI docs, you can create your own generators as well, which comes in handy for us.

Add some new paths to aurelia.json:

"paths": {
    ...
    "fa": "node_modules\\font-awesome",
    "faCssOutput": "src",
    "faFontsOutput": "fonts"
    ...
}

Create a task for css bundling... au generate task fa-css

Modified task file: aurelia_project\tasks\fa-css.js|ts

import * as gulp from 'gulp';
import * as changedInPlace from 'gulp-changed-in-place';
import * as project from '../aurelia.json';
import {build} from 'aurelia-cli';

export default function faCss() {
    return gulp.src(`${project.paths.fa}\\css\\*.min.css`)
        .pipe(changedInPlace({firstPass:true}))
        /* this ensures that our 'require-from' path  
           will be simply './font-awesome.min.css' */
        .pipe(gulp.dest(project.paths.faCssOutput))
        .pipe(gulp.src(`${project.paths.faCssOutput}\\font-awesome.min.css`))
        .pipe(build.bundle());
};

...and another for copying font files: au generate task fa-fonts

Modified task file: aurelia_project\tasks\fa-fonts.js|ts

import * as gulp from 'gulp';
import * as project from '../aurelia.json';

export default function faFonts() {
    return gulp.src(`${project.paths.fa}\\fonts\\*`)
        .pipe(gulp.dest(project.paths.faFontsOutput));
}

Add these new tasks above to the build process in aurelia_project\tasks\build.js|ts:

export default gulp.series(
    readProjectConfiguration,
    gulp.parallel(
        transpile,
        processMarkup,
        processCSS,
        // custom tasks
        faCss,
        faFonts
    ),
    writeBundles
);

After doing these steps, au build should embed font-awesome.min.css into scripts/app-bundle.js and copy necessary font files to ./fonts folder.

Last thing to do is to require font-awesome within our html.

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

Olwen answered 1/9, 2016 at 14:29 Comment(2)

Thanks Marton, this walk-through definitely helped me understand the process more clearly and Grace's answer fixed it for me. – Practical 1/9, 2016 at 18:43

In fa-css, you cannot call pipe to gulp.src before the file is first copied to the faCssOutput directory without the task failing. – Cornelius 23/1, 2017 at 15:17

You don't need more much this:

in aurelia.json

"dependencies": [
      "jquery",
      "text",
      {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist/",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "resources": [
          "css/bootstrap.min.css"
        ]
      },
      {
        "name": "font-awesome",
        "path": "../node_modules/font-awesome/css",
        "main": "",
        "resources": [
          "font-awesome.min.css"
        ]
      }
    ]
  }
],
"copyFiles": {
  "node_modules/font-awesome/fonts/fontawesome-webfont.woff": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.woff2": "fonts/",
  "node_modules/font-awesome/fonts/FontAwesome.otf": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.ttf": "fonts/",
  "node_modules/font-awesome/fonts/fontawesome-webfont.svg": "fonts/"
}

See section Setup for copying files

i hope help you.

Boast answered 16/5, 2017 at 11:47 Comment(2)

this didnt work for me, it made it look for a js file which obviously doesn't exist at "../node_modules/font-awesome/css.js" – Hitchcock 20/7, 2017 at 6:55

Looking into the font-awesome css file the target directory should be "font-awesome/fonts/" instead of "fonts/". That worked for me.... but the hint with copyFiles is very good and helped a lot ;) – Gamelan 11/7, 2018 at 9:14

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>

Eldridgeeldritch answered 1/12, 2016 at 14:35 Comment(4)

'font-awesome.sass' wasn't found when importing in app scss – Rodrickrodrigez 7/2, 2017 at 20:55

@Rodrickrodrigez just @import 'font-awesome'; not @import 'font-awesome.sass'; – Eldridgeeldritch 8/2, 2017 at 12:46

Tried that aswell, same result :( I've tried including other sass files and that works – Rodrickrodrigez 8/2, 2017 at 13:37

@Rodrickrodrigez can you elaborate on your fix. It might help other people. – Eldridgeeldritch 6/4, 2017 at 14:8

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Simple default settings method

Alternative

Specifying a custom font location

EDIT

Recommended topics

Hot tags