Adding Font Awesome to a CLI webpack project


I am getting the impression that adding Font Awesome to a CLI webpack project is not that straight forward. I have seen a question along these lines on SO but it referred build.js which I dont have along with gulp which I dont use.

Is there a way of adding Font Awesome to an Aurelia project where I have webpack and package.json in the CLI ASP.NET option?


Add it in index.html: <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" type="text/css">


Hi Jeff, This hasnt worked for me. In my CLI project (created from the CLI) I have index.cshtml - This is what I did.

I first added Font-Awesome to package.json using “npm i -S font-awesome”. I checked that it was indeed in package .json - it was.

I then added your link to index.cshtml - which is in views in the 2 project.

Here is the location:

Here is the file with that link added:

        ViewData["Title"] = "Home Page";
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" type="text/css">
    <div aurelia-app="boot">Loading...</div>

    @section scripts {
        <script type="text/javascript" src="~/dist/vendor.js" asp-append-version="true"></script>
        <script type="text/javascript" src="~/dist/app.js" asp-append-version="true"></script>

I am getting a 404 on this link:

I am wondering if this has to be added to webpack so its available from the wwwroot/dist folder instead?

  1. au new myProject , >3-custom >3-webpack >1 Web >1 Babel >…N/A
  2. npm install font-awesome --save-dev
    yarn add font-awesome
    au-cli uses yarn by default if you have installed yarn
  3. make sure you have got css loaders in webpack.config.js,
    when using au-cli to generate a webpack it adds css loader in module section automatically

module: {
test: /.css$/i,
issuer: [{ test: /.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules

  1. in app.js:
 import 'font-awesome/css/font-awesome.css';
  export class App {
    constructor() {
  1. in app.html:

< i class=“fa fa-camera-retro fa-5x”> fa-5x

  1. au build
  2. au run -w

Note: step 4 is most likely, what you are missing. You need to require or import the css, that way
webpack recognizes it and bundles it