Adding Font Awesome to a CLI webpack project

1

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?

1 Like
2

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

3

Hi Jeff, This hasnt worked for me. In my CLI asp.net 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.

package
package.png474×864 33.8 KB

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

Here is the location:

solution-explorer
solution-explorer.png354×795 24.6 KB

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:

font-awesome
font-awesome.png1064×795 61.1 KB

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

4
  1. au new myProject , >3-custom >3-webpack >1 Web >1 Babel >…N/A
  2. npm install font-awesome --save-dev
    or
    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:

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

  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