title: Font awesome icons not showing up in ASP.NET CORE MVC Project
body: <p>I'm working on an ASP.NET CORE MVC application and i'm having trouble loading the font awesome icons. Here is what the folder layout is:<a href="https://i.stack.imgur.com/hKuDu.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/hKuDu.jpg" alt="enter image description here"></a></p>
  
  <p>Here is what my _layout.cshtml looks like:</p>
  
  <pre><code>&lt;environment include="Development"&gt;
      &lt;script src="~/lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.css" /&gt;
  &lt;/environment&gt;
  &lt;environment exclude="Development"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
          asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
          asp-fallback-test="window.jQuery"
          crossorigin="anonymous"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="&gt;
  &lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
          asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
          asp-fallback-test="window.jQuery &amp;&amp; window.jQuery.fn &amp;&amp; window.jQuery.fn.modal"
          crossorigin="anonymous"
          integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o"&gt;
  &lt;/script&gt;
  &lt;link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" /&gt;
  &lt;/environment&gt;
  &lt;script src="~/js/site.js" asp-append-version="true"&gt;&lt;/script&gt;
  
  @RenderSection("Scripts", required: false)
  </code></pre>
  
  <p>Here's how i'm trying to use the fontawesome icons:</p>
  
  <pre><code>  &lt;span class='input-group date datepicker'&gt;
                      @Html.TextBoxFor(m =&gt; m.CandidateDetail.DateOfBirth, new { @id = "DateOfBirth", @class = "form-control" })
                      &lt;span class="input-group-append"&gt;
                          &lt;span class="input-group-text"&gt;&lt;i class="fas fa-calendar"&gt;&lt;/i&gt;&lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/span&gt;
  </code></pre>
  
  <p>All i'm seeing when i launch the project is a square. Anything i'm doing wrong here?</p>