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

Question

I am using the NET.Core 2.0 Angular template, which works with the webpack component, angular-cli, Angular, typescript.

I did:

command line - install the package and bootloader

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

webpack.config.js - add a 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 into my component

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

my.component.html . Place icon

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

---

Now I have not received the error message, but still can not see the icon.

Did I do something wrong?

Answer 1

Thanks guys for your help ~

In the end, I fixed the problem by updating webpack.config.js so that:

 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" } ] } 

instead of putting it in rules: [...] then it is fixed!

It is strange that rules will not work ... but still ~: P

Answer 2

This is for .NET Core 2, after creating a SPA project using dotnet new angular :

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

• After that, go to webpack.config.vendor.js and add a font that is amazing to the array in subsoil 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 webpack that we have added this new package. Therefore, if you haven’t done this before installing it to the root of the project using npm install --save-dev npm-install-webpack-plugin .

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

Answer 3

Maybe I'm the only one who installed a font other than npm install fontawesome --save ? Well, it should have been like npm install font-awesome --save . Damn it!