How to add font awesome using ASP.NET.Core Angular template

Question

I'm using the NET.Core 2.0 Angular template, which work with webpack, angular-cli, angular component, typescript.

I did:

command line - Install package and loader

npm install --save font-awesome
npm install url-loader --save-dev

webpack.config.js - add loader rule

    module: {
        rules: [
             ...
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" }
        ]
    },    

my.component.css - Import to my component

@import '~font-awesome/css/font-awesome.css';

my.component.html - Put the icon

<i class="fa fa-check fa-6"></i>

---

Now I got no error message but still can't see the icon.

Did I do anything wrong?

Answer 1

This is for .NET Core 2, after you create a SPA Project using dotnet new angular:

1. Go to the root of the project and install the package: npm install font-awesome --save. You should now see it in package.json dependencies.

2. After that go to webpack.config.vendor.js and add font awesome to the array under non tree shakable modules:

   const nonTreeShakableModules = [
       'bootstrap',
       'bootstrap/dist/css/bootstrap.css',
       'es6-promise',
       'es6-shim',
       'event-source-polyfill',
       'font-awesome/css/font-awesome.css',
       'jquery',
   ];
   

3. Now we need to tell the webpack that we added this new package. So if you haven't done so before install this in the root of project with npm install --save-dev npm-install-webpack-plugin.

4. Finally, run this command in the root of project: webpack --config webpack.config.vendor.js

Answer 2

Thank you guys for your help~

Eventually I fixed the issue by updating the webpack.config.js to:

module: {
  loaders: [
    {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    },
    {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "url-loader"
    }
  ]
}

rather than put it in the rules: [...]

It's weird that rules won't work...but anyway~ :P