Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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:

Here is what my _layout.cshtml looks like:

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.css" />
</environment>
<environment exclude="Development">
<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=">
</script>
<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 && window.jQuery.fn && window.jQuery.fn.modal"
        crossorigin="anonymous"
        integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
Here's how i'm trying to use the fontawesome icons:
  <span class='input-group date datepicker'>
                    @Html.TextBoxFor(m => m.CandidateDetail.DateOfBirth, new { @id = "DateOfBirth", @class = "form-control" })
                    <span class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                    </span>
                </span>
All i'm seeing when i launch the project is a square. Anything i'm doing wrong here?
For referencing font-awesome, you should add ~/lib/font-awesome/css/all.css instead of ~/lib/font-awesome/css/fontawesome.css.   
Add code below to <environment include="Development">  
<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</environment>
                Not exactly what you did, but this put me on the right track to the solution. I upgraded from 4.x to 5.x, and one of the new icons was not showing. I simply had to update the href from <link href="/Content/font-awesome.css" rel="stylesheet" /> to <link href="/Content/fontawesome-all.css" rel="stylesheet" /> in my _Layout.cshtml.
– Sagebrush Gardener
                Mar 12, 2021 at 0:13
Check the console+network tab on chrome developer tools (f12)
If you hosted application on local IIS, most of the time IIS doesn't allow mime type .woff by default. you can add mime type using web.config
<system.webServer>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>
Another reason would be the relative path between CSS files and font files not matching.
since you are using the same directory structure provided with the FontAwesome, I don't
think this would be the problem.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.