Angular

Add Font Awesome 5 To Angular 11

In this article, we will learn how to add Font Awesome 5 to an Angular 11.

Font Awesome is a toolkit for icons and fonts, based on CSS and LESS. Font Awesome was created by Dave Gandy to use with Twitter Bootstrap and later it was incorporated into the Bootstrap CDN.

Prerequisites:

  • Basic knowledge of Angular
  • Code editor like Visual Studio Code

Execute the command given below, to add the free version of Font Awesome 5 to your Angular project.

npm install --save @fortawesome/fontawesome-free

Now, we have to reference either the /css/all.min.css or the /js/all.min.js in the angular.json file.

Note: Make sure you referenced it under the build node.

Want just certain styles of icons?

If you would like only to use specific styles rather than the default all option font awesome have included Web Fonts and SVG frameworks, reference the specific styles you want to use like fa-brands or fa-solid, and then the loader fontawesome in place of all.

For example, my project just needs Font Awesome solid + brand.

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Also, check Drag & Drop Image Upload In Angular 10 With .NET Core

Yasin Panwala

Yasin Panwala is a Web Developer and Author at TheCodeHubs. He has experience in Web Developing and Designing and also in Writing. He has got his skills in working on technologies like .NET Core, ADO.NET, AJAX, Angular, AngularJS, ASP.NET, ASP.NET MVC, Bootstrap, C#, CSS, Entity Framework, Express.js, GraphQL, HTML, JavaScript, JQuery, JSON, LINQ, Microsoft Office, MongoDB, MySQL, Node.js, PostgreSQL, SQL, SQL Server, TypeORM, TypeScript, Visual Basic .NET, Web API. He also got his skills in working with different integration and some known versioning tools. He is always ready to learn new things and he always tries his best on tasks that are assigned to him and gives the best possible outputs.

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

3 years ago