.NET Core导航栏添加购物车图标不显示及右对齐问题咨询

图标无法显示&分页冲突问题解决 #

你使用的glyphicon glyphicon-shopping-cart是Bootstrap 3专属的图标类，.NET Core默认项目模板使用的Bootstrap 4/5版本已经移除了Glyphicons内置支持，这是图标无法显示的核心原因。
你之前添加引用后分页失效，是因为你引入了全量的Bootstrap 3样式覆盖了项目默认的高版本Bootstrap，两个版本的分页组件类名、样式规则不兼容导致的，不需要替换整体Bootstrap版本，单独引入图标资源即可：

• 方案1：使用Bootstrap Icons图标
  先在项目的_Layout.cshtml头部引入Bootstrap Icons的样式文件，之后将原图标span的类名替换为bi bi-cart即可正常显示购物车图标，不会和现有Bootstrap版本产生冲突。
• 方案2：保留Glyphicons使用
  单独引入Glyphicons的字体文件和对应样式表，不要引入全量Bootstrap 3样式，避免影响现有组件。

购物车图标靠右对齐配置 #

你当前将购物车导航项放在了带flex-grow-1属性的ul标签内，该属性会让ul占满导航栏剩余宽度，内部元素默认靠左排列。要在不改动原有导航项位置的前提下让购物车靠右，调整导航结构即可，修改后的代码如下：

<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中，位置保持不变 -->
                <ul class="navbar-nav flex-grow-1">
                    <!-- 其余原有导航项代码保留在此处 -->
                </ul>
                <!-- 购物车导航项单独放该ul中，自动靠右排列 -->
                <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="bi bi-cart">Cart </span></a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

调整后左侧导航栏保持原有靠左排列的逻辑，购物车会排在登录组件左侧、整体靠右展示。

内容的提问来源于stack exchange，提问作者user4912134