# Font Awesome v5 in a CLI based, non-webpack project

**URL:** <https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046>\
**Category:** Help Requests\
**Created:** [April 5, 2018, 11:03pm UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046 "2018-04-05T23:03:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![vidar](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vidar/32/723_2.png) [@vidar](https://discourse.aurelia.io/u/vidar)\
**Post date:** [April 5, 2018, 11:03pm UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046/1 "2018-04-05T23:03:45Z")

</div>

Hi, has anyone had any luck getting font awesome to work with a CLI-based project?

Apart from installing the packages via npm, I’m a bit clueless on how to proceed. I’m guessing there is some configuration that has to be done in aurelia.json in order for the FA-libraries to be included, but I’m not sure how to specify this.

[https://fontawesome.com/how-to-use/use-with-node-js](https://fontawesome.com/how-to-use/use-with-node-js)

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 6, 2018, 3:24am UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046/2 "2018-04-06T03:24:04Z")

</div>

fa5 has 2 ways to be used. The easiest way is to use the “SVG with JS”. For that, just add the js to the “prepend” section before loading `requirejs`.

```auto
"prepend": [
  // ...
  "folder_of_fa5/js/all.js",
  "node_modules/requirejs/require.js"
],

```

Beware fa5 “SVG with JS” mutates the DOM, you need special treatment if you bind changeable class.

> <https://stackoverflow.com/questions/48904240/font-awesome-5-icons-class-binding-change-doesnt-affect-the-icon/48906349#48906349>

---

<div class="post-metadata">

**Author:** ![vidar](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/vidar/32/723_2.png) [@vidar](https://discourse.aurelia.io/u/vidar)\
**Post date:** [April 6, 2018, 8:24am UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046/3 "2018-04-06T08:24:10Z")

</div>

Thanks, I ended up installing the `@fortawesome/fontawesome-free-webfonts` package and using a custom task to copy fonts and css files.

ref: [https://stackoverflow.com/questions/39271458/how-can-i-add-font-awesome-to-my-aurelia-project-using-npm](https://stackoverflow.com/questions/39271458/how-can-i-add-font-awesome-to-my-aurelia-project-using-npm)

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [April 6, 2018, 2:38pm UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046/4 "2018-04-06T14:38:13Z")

</div>

Not sure if you know cli provided copyFiles especially for dealing with fonts and other static resources, you don’t need an extra task. It is documented.

That SO page is bit old, before copyFiles was introduced.

---

<div class="post-metadata">

**Author:** ![elitemike](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/elitemike/32/690_2.png) [@elitemike](https://discourse.aurelia.io/u/elitemike)\
**Post date:** [April 6, 2018, 4:49pm UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046/5 "2018-04-06T16:49:47Z")

</div>

I have this working with SVG. Your view-model will look something like this.

```auto
import fontawesome from "@fortawesome/fontawesome";
import light from "@fortawesome/fontawesome-pro-light";
fontawesome.library.add(light.faSearch);

```

Your aurelia.json will look like this. You do need the first one in this, the rest will be optional depending on what icons you need. You do NOT need to add anything to prepend or have any copy tasks

```auto
          {
            "name": "@fortawesome/fontawesome",
            "path": "../node_modules/@fortawesome/fontawesome",
            "main": "index"
          },
          {
            "name": "@fortawesome/fontawesome-free-regular",
            "path": "../node_modules/@fortawesome/fontawesome-free-regular",
            "main": "index"
          },
          {
            "name": "@fortawesome/fontawesome-free-solid",
            "path": "../node_modules/@fortawesome/fontawesome-free-solid",
            "main": "index"
          },
          {
            "name": "@fortawesome/fontawesome-pro-light",
            "path": "../node_modules/@fortawesome/fontawesome-pro-light",
            "main": "index"
          },
          {
            "name": "@fortawesome/fontawesome-free-brands",
            "path": "../node_modules/@fortawesome/fontawesome-free-brands",
            "main": "index"
          }

```

---

<div class="post-metadata">

**Author:** ![jrogalan](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/jrogalan/32/929_2.png) [@jrogalan](https://discourse.aurelia.io/u/jrogalan)\
**Post date:** [July 13, 2018, 6:36pm UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046/6 "2018-07-13T18:36:36Z")

</div>

Hi there @vidar.

You have some working example… The stackoverflow question has not worked for me …

Regards!

---

<div class="post-metadata">

**Author:** ![SNO](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sno/32/650_2.png) [@SNO](https://discourse.aurelia.io/u/SNO)\
**Post date:** [July 17, 2018, 1:08pm UTC](https://discourse.aurelia.io/t/font-awesome-v5-in-a-cli-based-non-webpack-project/1046/7 "2018-07-17T13:08:45Z")

</div>

@jrogalan  
It works with the copyFiles. But the example is buggy. I added a comment in stack-overflow:

> 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 😉 –

Referring to the following post:

> 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/”  
> }

The css classes of font-awesome are looking into directory “font-awesome/fonts/” and not in “fonts/”  
Hope it helps