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

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="https://stackoverflow.com/questions/39271458/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.

More Related Contents:

Leave a Comment Cancel reply