CODEWITHSUNDEEP
asp.net-coreasp.net-core-mvcfont-awesome
Spartan 117
Spartan 117

Reputation: 619

Font awesome icons not showing up in ASP.NET CORE MVC Project

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:enter image description here

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?

Upvotes: 5

Views: 16081

Answers (3)

Moises Torres
Moises Torres

Reputation: 1

In my case I have had the css file in the bundle in my ASP.NET MVC app running on .NET 4.8:

bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/css/sb-admin-2.min.css",
          "~/vendor/fontawesome-free/css/all.min.css",
          "~/vendor/datatables/dataTables.bootstrap4.min.css",
            "~/Content/jquery-ui.css",
           "~/Content/font/bootstrap-icons.min.css" 
          ));

In my local environment, it works; however, it was not working in the Azure Web Application. To fix it, I decided to remove it from the bundle section and add it directly to the HEAD section in my _layout.cshtml.

<head>
    @Styles.Render("~/Content/css")
    <link rel="stylesheet" href="~/vendor/fontawesome-free/css/all.min.css">
</head>

Upvotes: 0

Chinthaka Fernando
Chinthaka Fernando

Reputation: 814

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.

Upvotes: 1

Edward
Edward

Reputation: 29976

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>

Upvotes: 21

Related Questions