导航栏中的图标 .NET core答案

【问题标题】：Icons in the Navigation bar .NET core导航栏中的图标 .NET core
【发布时间】：2021-11-22 03:20:03
【问题描述】：

我正在尝试在导航栏中添加购物车图标，但它没有按预期工作。以下是我尝试过的

<body>
  <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark order-bottom box-shadow mb-3" style="background-color: #008cba; color: #ffffff;">
        <div class="container">
           <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li>
                        <a class="nav-link" asp-controller="Orders" asp-action="Index" asp-route-custEmail=@User.Identity.Name><span class="glyphicon glyphicon-shopping-cart">Cart </span></a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

问题是图标没有显示在 UI 中，它显示为

另外，我怎样才能让购物车图标在导航栏中向右显示，并保持其他导航不变。请让我知道我在这里缺少什么

***** 编辑 ***** 添加参考之前

添加引用后，导航中的图标会出现，但它会删除分页

【问题讨论】：

你有 glyphicons 样式表的参考吗？
@Anuraj 不，我 hvaenot .. 我怎样才能添加该引用，我认为它是引导程序的一部分
@Anuraj 我将引用添加到我的 _Layout 文件中仍然没有变化。我已经用我尝试过的内容更新了我的问题。非常感谢任何帮助
现在你正在尝试使用 Font Awesome。

标签： razor bootstrap-4 asp.net-core-mvc

【解决方案1】：

尝试使用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

替换

<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

然后将购物车图标放入_LoginPartial。布局：

<body>
  <header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark order-bottom box-shadow mb-3" style="background-color: #008cba; color: #ffffff;">
        <div class="container">
           <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1" style="width:600px">
                    
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

_LoginPartial：

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" asp-controller="Orders" asp-action="Index" asp-route-custEmail=@User.Identity.Name><span class="glyphicon glyphicon-shopping-cart">Cart </span></a>
    </li>
    @if (SignInManager.IsSignedIn(User))
    {
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @User.Identity.Name!</a>
        </li>
        <li class="nav-item">
            <form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
                <button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
            </form>
        </li>
    }
    else
    {
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
        </li>
        <li class="nav-item">
            <a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
        </li>
    }
</ul>

结果：

【讨论】：

问题是如果我添加新的引用，它会占用我已经实现的分页。我已经更新了问题

【解决方案2】：

试试这个 - 像这样修改你的代码 - <span class="fas fa-shopping-cart">&nbsp;Cart </span> 而不是 <span class="glyphicon glyphicon-shopping-cart">Cart </span>

<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark order-bottom box-shadow mb-3" style="background-color: #008cba; color: #ffffff;">
        <div class="container">
           <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li>
                        <a class="nav-link" asp-controller="Orders" asp-action="Index" asp-route-custEmail=@User.Identity.Name><span class="fas fa-shopping-cart">&nbsp;Cart </span></a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

我没有添加 Bootstrap 和 Font Awesome 的引用。

这是JSFiddlesn-p

【讨论】：

我试图更改为class="fas fa-shopping-cart" 图标仍然没有出现.. 我有以下其他样式的参考资料 _Layout.cshtml ` ` ` ` ` cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/…">`你知道我是否遗漏了什么
fas fa-shopping-cart - 字体真棒图标。如果您喜欢使用引导图标，请使用此 class="bi bi-cart4" 。结帐icons.getbootstrap.com了解更多信息