How To Install Or Add Icons In ASP.NET Core MVC Pages Using Font Awesome

This post illustrates on how to install or add icons to your ASP.NET Core MVC website pages using Font Awesome. If you added Bootstrap 4.x to your project, you might noticed that when you typed glyphicon in a class attribute of an html element, the intellisense does'nt show the glyphicons from Bootstrap 3.x. It's because Bootstrap 4.x does not support glyphicons anymore but instead encourage us to use Font Awesome. Given that you have already created your ASP.NET Core MVC project, the next thing to do is install via Libman the Font Awesome library. When installed, this will be mapped to your wwwroot folder.

In Layout.cshtml page, reference these three files specifically fontawesome.css, regular.min.css and solid.min.css. In that way, Font Awesome is accessible globally in your project.

<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.css" />
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

To access these wonderful Font Awesome classes, all you need to do is add the fas prefix for version 5.x followed by the icon names.

<a asp-action="Edit" title="Edit" asp-route-id="@item.EmployeeId">
	<i class="fas fa-edit"></i>
</a> |
<a asp-action="Delete" title="Delete" asp-route-id="@item.EmployeeId">
	<i class="fas fa-trash"></i>
</a>

<a asp-action="Create" class="btn btn-info">
	<i class="fas fa-plus"><span>Add Employee</span></i>
</a>

That's it. You may now be able to use these amazing icons in your ASP.NET Core projects.