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

Help Requests
1

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

2

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.

"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.

3

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

4

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.

5

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

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

          {
            "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"
          }
1 Like
6

Hi there @vidar.

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

Regards!

7

@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 :wink: –

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