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?

This isn't anything to do with Angular or ASP.Net Core, it's just plain CSS. You can't use ~ in the import, try: @import '/font-awesome/css/font-awesome.css'; — DavidG
– DavidG, Commented Sep 5, 2017 at 10:33
I keep getting this error Error: Cannot find module "-!../../../../node_modules/css-loader/index.js!./font-awesome/css/font-awesome.css" at webpackMissingModule but with ~ is OK. — John Jang
– John Jang, Commented Sep 6, 2017 at 6:00

yaakov · Accepted Answer · 2017-09-09 20:31:51Z

11

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

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.

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',
];

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.
Finally, run this command in the root of project: webpack --config webpack.config.vendor.js

edited Sep 9, 2017 at 20:31

yaakov

5,9191 gold badge40 silver badges48 bronze badges

answered Sep 9, 2017 at 20:10

dave o grady

82811 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Paul Speranza Over a year ago

Thank you so much! I was ripping my hair out. I did not have to do step 3, just step 4.

Paul Speranza Over a year ago

FYI - my above comment is for webpack version 2.5.1.

RandomHandle Over a year ago

I had to install webpack globally npm install -g webpack for #4 to work for me. I also had to remember to rebuild my app and F5 to see the changes in the browser.

K. Akins Over a year ago

None of these worked for me. I started with a fresh angular template. I've added the .css entry to the nonTreeShakableModules array. I then ran step 3, which gave me an error. So I tried step 4 (with and without global webpack installation), and I get "missing script: webpack".

Perrier Over a year ago

I don't have webpack.config.vendor.js after dotnet new angular. Can I simply make one?

John Jang · Accepted Answer · 2018-05-04 02:59:39Z

3

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

edited May 4, 2018 at 2:59

answered Sep 6, 2017 at 6:48

John Jang

3,0651 gold badge28 silver badges29 bronze badges

Comments

Adam Cox · Accepted Answer · 2017-11-02 08:26:39Z

2

Maybe I am the only one who installed font-awesome like npm install fontawesome --save? Well, it should have been like npm install font-awesome --save. Dammit!

answered Nov 2, 2017 at 8:26

Adam Cox

3,7392 gold badges41 silver badges47 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related