Yellow Button is suppose to be the edit icon

I am developing a Web App using C# and .NET – taking advantage of scaffolding. As well as JavaScript, HTML and CSS.

I added FontAwesome onto Visual Studio using Client-Side Library. I initially downloaded the files, however I thought I may have implemented them wrong as I came up against the same issue – so I used installed & used Client-Side Library – FontAwesome 5.15.4 which was successful.

However, upon trying to implement an icon to increase user accessibility – I found that it doesn’t work? It should up as **vertical lines in a rectangle shape (view image above)**I am not too sure why.

I have looked at site.css (came with Razor Page Web App Template) and nothing there seems to be overriding it.

I also re-added FontAwesome 5.15.4 using the Client-Side Library. I also cleared cache before restarting up the web app.

Has anyone came across this before?

Index.cshtml

@page
@model Pages.Cars.IndexModel
@{
    ViewData["Title"] = "Cars List";
}

<!-- (The at sign) is a Directive/Razor Syntax which tells HTML we are about to interweave C# code -->
<!-- Model' is a STATIC or GLOBAL variable which represents an OBJECT of PageModel from .cshtml.cs
    So anything that is PUBLIC in the .cshtml.cs file, like HEADING, is available to use via 'Model.X'
    This is HOW WE MAKE OUR WEB APP DYNAMIC (C# .NET) instead of STATIC (HTML, CSS, JS)-->
<h1>Car List</h1>

<p>
    <a class="btn btn-primary" asp-page="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <!-- Head section with header fr our table -->
        <tr>
            <!-- Table rows for our table -->
            <th>
                @Html.DisplayNameFor(model => model.Cars[0].Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Cars[0].Year)
            </th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Cars)
        { // For each item that came in our List of Cars ...
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name) <!-- ... Give me a display for the Name ... -->
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Year) <!-- ... AND Give me a display for the Year -->
                </td>
                <td>
                    <form asp-page-handler="delete" asp-route-id="@item.CarID" method="POST">
                        <a class="btn btn-warning" asp-page="./Update" asp-route-id="@item.CarID">
                            <i class="fas fa-binoculars" aria-hidden="true"></i>
                        </a> | <!-- A link to edit -->
                        <a class="btn btn-info" asp-page="./Details" asp-route-id="@item.CarID">
                            <i class="" aria-hidden="true"></i>
                        </a> | <!-- A link to view details  -->    
                        <button class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this record?')">Delete</button>
                    </form>
                    <!--<a asp-page="./Delete" asp-route-id="@item.CarID">Delete</a> |--> <!-- A link to delete  -->
                </td>
            </tr>
        }
    </tbody>
</table>

site.css

/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

I plan on putting my css folders in ChatGPT to see if there was any attributes/elements that override that of FontAwesome but I have used up my limit for now.