How can I get font awesome icons to show up on the pages for account management in Asp.Net Core Identity?

user_8966035 0
Viewed 777

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"?

asp.net-core-identity font-awesome asp.net-core
1 Answers

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

enter image description here

user_67516340
Related