CODEWITHSUNDEEP
asp.netasp.net-mvcrazorfont-awesomenuget-package
J.G.Sable
J.G.Sable

Reputation: 1388

Font Awesome Icon not working in .NET/MVC Application

Kind of simple as the title says but I'm struggling with the steps. I downloaded font-awesome from Nuget Package Manager and added it to my project.

enter image description here

I also added the the font-awesome css in my bundle config file:

bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/font-awesome.min.css"));

Content/CSS is loaded on my main layout page, which all subsequent pages inherit from.

<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

But trying to use the icons in a button form:

<a href="@Url.Action("Edit", "Story", new { id = Model.Id })" class="btn btn-primary">
                    <i class="fas fa-adjust"></i>
                    Edit Story
</a>

enter image description here

Results in nothing showing up. What am I missing in the steps?

Upvotes: 4

Views: 6786

Answers (1)

MelOS
MelOS

Reputation: 653

Couple of things to check:

  1. Did you also include the actual fonts and did you place them on the folder that is referenced inside your font-awesome.css file(search for @font-face tag ,url property)
  2. Are you also loading javascript(fontawesome.js) and including it inside ScriptBundle?

There are dozens of NuGet Packages for font-awesome today however I prefer to be in control so this is the way to manually install Font Awesome in ASP.NET MVC:

  1. Download font awesome zip package from official website.
  2. Create a folder inside Content subfolder and name it something like "font-awesome".
  3. Copy css and webfonts folders from downloaded zip package to the folder created in step 2.
  4. Copy js folder content to your Scripts folder
  5. In your bundle config, include "~/Content/font-awesome/css/all.css" and also "~Scripts/fontawesome.js".
  6. Done

Upvotes: 2

Related Questions