# Adding Font Awesome to a CLI webpack project

**URL:** <https://discourse.aurelia.io/t/adding-font-awesome-to-a-cli-webpack-project/572>\
**Category:** Uncategorized\
**Created:** [December 29, 2017, 12:56pm UTC](https://discourse.aurelia.io/t/adding-font-awesome-to-a-cli-webpack-project/572 "2017-12-29T12:56:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![si2030](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/si2030/32/275_2.png) [@si2030](https://discourse.aurelia.io/u/si2030)\
**Post date:** [December 29, 2017, 12:56pm UTC](https://discourse.aurelia.io/t/adding-font-awesome-to-a-cli-webpack-project/572/1 "2017-12-29T12:56:36Z")

</div>

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](https://stackoverflow.com/questions/39271458/how-can-i-add-font-awesome-to-my-aurelia-project-using-npm) 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](http://ASP.NET) option?

---

<div class="post-metadata">

**Author:** ![jeffgrann](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jeffgrann/32/43_2.png) [@jeffgrann](https://discourse.aurelia.io/u/jeffgrann)\
**Post date:** [December 29, 2017, 6:08pm UTC](https://discourse.aurelia.io/t/adding-font-awesome-to-a-cli-webpack-project/572/2 "2017-12-29T18:08:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![si2030](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/si2030/32/275_2.png) [@si2030](https://discourse.aurelia.io/u/si2030)\
**Post date:** [December 30, 2017, 12:39am UTC](https://discourse.aurelia.io/t/adding-font-awesome-to-a-cli-webpack-project/572/3 "2017-12-30T00:39:51Z")

</div>

Hi Jeff, This hasnt worked for me. In my CLI [asp.net](http://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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/ef84d4f8d1d267b4c3cc06a8107a19e62bf6d7c2.png)

I then added your link to index.cshtml - which is in views in the [asp.net](http://asp.net) 2 project.

Here is the location:

 ![solution-explorer](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/a7e711456eafa2bbe41c9cd18e66c6dfce1c24cc.png)

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](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/1b2a25b77b9873e954bb2768c6b9cf81ccb1180d.png)

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

---

<div class="post-metadata">

**Author:** ![einaradolfsen](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/einaradolfsen/32/409_2.png) [@einaradolfsen](https://discourse.aurelia.io/u/einaradolfsen)\
**Post date:** [December 31, 2017, 1:18pm UTC](https://discourse.aurelia.io/t/adding-font-awesome-to-a-cli-webpack-project/572/4 "2017-12-31T13:18:53Z")

</div>

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