As we all have seen in popular websites , there is a small icon on the top-right
of the icon of cart ! I have to use something like that in my ASP .NET web-page.
How do i get this icon to the top-right of the cart icon ..
The icon of the cart is a normal bootstrap one and the css for the number of items in cart is as follows :
.badge {
padding-left: 9px;
padding-right: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.label-warning[href],
.badge-warning[href] {
background-color: #c67605;
}
NOTE: all the menu items shown in the image including the cart icon are in ul-li
list .
<li>
<a href="Cart1.aspx" class="icon-shopping-cart" style="font-size: 25px"><asp:Label ID="lblCartCount" runat="server" CssClass="badge badge-warning" ForeColor="White"/></a>
</li>
EDIT: The cart count is just nearly how i want it to be , but could it go a bit more to the top of the cart icon ? like about 3-5px?
You need to add vertical-align: top;
to your counter, in this case to the ID #lblCartCount
#lblCartCount {
font-size: 12px;
background: #ff0000;
color: #fff;
padding: 0 5px;
vertical-align: top;
}
Here's an online example
来源:https://stackoverflow.com/questions/29313879/shopping-cart-number-of-items-in-cart-css