I am trying to add cart icon in my Navigation bar and it is not working as expected. Below is what I tried <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> The issue is the Icon is not showing up in the UI and it shows up like Also how can I have Cart icon to show towards the right in the Navigation bar and leave other navigation as is. Please let me know what is that I am missing here ***** EDIT ********** Before adding reference After adding reference the icon in the navigation appears but itremoves the Pagination

Icons in the Navigation bar .NET core

Reputation: 19598

Try this - Modify your code like this - <span class="fas fa-shopping-cart"> Cart </span> instead of <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" [email protected]><span class="fas fa-shopping-cart">&nbsp;Cart </span></a>
                    </li>
                </ul>
                <partial name="_LoginPartial" />
            </div>
        </div>
    </nav>
</header>

I didn't added the reference of Bootstrap and Font Awesome.

Here is a JSFiddle snippet

Upvotes: 1

Yiyi You

Reputation: 18189

Try to use

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

to replace

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

Then put cart icon into _LoginPartial. Layout:

<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" [email protected]><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>

result:

Upvotes: 1

Icons in the Navigation bar .NET core

Answers (2)

Related Questions