How to Add Font Awesome to an ASP.NET Core Web Application (Core Version 2.0 and higher)

Start Visual Studio

Select File -> New -> Project…

In the New Project window select Visual C# -> .NET Core -> ASP.NET Core Web Application

Select a folder you want to create your project in, enter the project name and solution name

In the New ASP.NET Core Web Application window select the Web Application (Model-View-Controller) application type. Additionally, select the ASP.NET Core 2.1 Version. Click OK to confirm your choice.

After the project have been created, click with the right mouse button on the project name in the solution explorer and select Add -> Client-Side Library…

The Add Client-Side Library dialog will appear

In the Library field enter font-awesome and press Enter

The dialog will show you what files will be installed to what directories. You can choose specific files to install. For that, select the option Choose specific files and mark the files you want to install.

Click Install to install the library

Next, we have to reference the library to be able to make use of it in our views. Open the _Layout.cshtml file and add the following lines within the <environment include=”Development”> <environment> tags

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css" />

And between the <environment exclude=”Development”><environment> tags add the following line

<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.min.css" />

Now, you can use the font awesome in your views, for instance, like that

<i class="fa fa-users"></i>

8 thoughts on “How to Add Font Awesome to an ASP.NET Core Web Application (Core Version 2.0 and higher)”

  1. Hi Anton:
    I tried on VS 2019 16.2.0 with Web App Net Core 2.2 and Font Awesome 5.9.0 and didn’t work.
    You can test creating a new Web App then installing Font Awesome; instead of icons it show a tiny empty square.
    Can you please help me?

    1. Hi, I have just tried it out with the same configuration. I have the same effect if I link the fontawesome.css file in the _Layout.cshtml. However, if I link the all.css file (), then everything works fine.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.