How can I get font awesome icons to show up on the pages for account management in Asp.Net Core Identity?
In my app's main _Layout.cshtml, I am linking to the Font Awesome stylesheet:
<link rel="stylesheet" href="~/lib/fontawesome/css/all.css" />
... and icons are appearing where I expect them to. Except for the razor pages concerning account management under Identity.
The _Layout.cshtml-file for account management sits in /Areas/Identity/Pages/Account/Manage. It does not contain <html>, <head> or <body>-tags, so there's no place there to add a <link rel.... I am however able to get icons working if I add those tags in, but that results in a nested set of tags, and is a hacky workaround.
Icons are displayed in these files (among others):
Areas/Identity/Pages/Account/Register.cshtml
Areas/Identity/Pages/Account/Login.cshtml
But not in these (among others):
Areas/Identity/Pages/Account/Manage/Index.cshtml
Areas/Identity/Pages/Account/Manage/Email.cshtml
How can I get it working for the files inside ../Manage/ without "hacking"?
The
_Layout.cshtml-file for account management sits in/Areas/Identity/Pages/Account/Manage.It does not contain , or -tags, so there's no place there to add a
<link rel....
To add reference to fontawesome css file(s), you can directly link to style sheet file of fontawesome icons in Account/Manage/_Layout.cshtml page, like below.
@{
Layout = "/Areas/Identity/Pages/_Layout.cshtml";
}
<link href="~/fontawesome/css/all.css" rel="stylesheet" />
<h1>Manage your account</h1>
<div>
<h4>Change your account settings</h4>
<hr />
<div class="row">
<div class="col-md-3">
<partial name="_ManageNav" />
</div>
<div class="col-md-9">
@RenderBody()
</div>
</div>
</div>
@section Scripts {
@RenderSection("Scripts", required: false)
}
Besides, if you also specify /Areas/Identity/Pages/_Layout.cshtml as the layout page of Account/Manage/_Layout.cshtml as above, adding reference to ~/fontawesome/css/all.css in section of /Areas/Identity/Pages/_Layout.cshtml page would works too.
Test Result
