components-font-awesome and angularjs local testing

Question

I am trying (in vain) to get fonts working locally. I have installed https://github.com/components/font-awesome and there is a line at the bottom of the page that states:

Here is the important part, the default font folder is on different path with the compiled bower file. We need to move the font from default font folder to the compiled bower folder (In the example vendor is the compiled folder).

Now I am using grunt, not gulp and I am also using the sass. So, in my sass I have done this:

@import "../../bower_components/components-font-awesome/scss/fa-brands";
@import "../../bower_components/components-font-awesome/scss/fa-regular";
@import "../../bower_components/components-font-awesome/scss/fontawesome";

Which pulls in the correct fa fonts, etc. Then following that text above I created a rule in my gruntfile that does this:

fonts: {
  expand: true,
  cwd: 'bower_components/components-font-awesome/webfonts/',
  src: '*',
  dest: '<%= yeoman.app %>/fonts'
}

But when I try to load my site using grunt serve -o I get this message:

Failed to decode downloaded font: http://localhost:9000/webfonts/fa-regular-400.woff2

So I can see it is looking in a different directory, so first of all I just added this to my sass:

$fa-font-path: "/fonts";

But that didn't work either. So then I decided to change the copy rule to actually copy to /webfonts and still no icons were downloaded. I have read some posts (with people with similar issues) and they have said the path was relative. So I decided to copy the fonts and directories to everywhere they might need to be:

• /webfonts
• /assets/webfonts
• /styles/webfonts
• /fonts

Even doing that, no fonts are loaded. Surely someone knows how to fix this?