Menu
I would like to place a number at top right corner of the font awesome cart icon.
I have created this simple html.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa" style="font-size:24px"></i>
<span> 5 </span>
</body>
</html>
The result is as follows.
How can i make the number appear the top right corner of the cart icon as shown in the following image?
I appreciate any help from css experts. Thanks!
988
How do I add a shopping cart icon in HTML? First make sure you have added Font Awesome Icon library. If this library is added just add the HTML css class fa fa-shopping-cart to any element to add the icon. Font Awesome shopping cart Icon can be resized as per your need.
Unfortunately, react-native-action-bar doesn't support a cart icon. The only predefined icons are: back, flag, loading, location, menu, phone, plus, start and star-outline. Check out here. Also, the library doesn't support react-native-vector-icons.
This appears to have been answered previously: Shopping cart - number of items in cart CSS
Modified the code to suit your request: http://jsfiddle.net/LhrLe0j6/361/
<i class="fa" style="font-size:24px"></i>
<span class='badge badge-warning' id='lblCartCount'> 5 </span>
CSS:
.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;
}
#lblCartCount {
font-size: 12px;
background: #ff0000;
color: #fff;
padding: 0 5px;
vertical-align: top;
margin-left: -10px;
}
You can achieve the same thing without the extra span tag using the pseudo elements of the same i tag. The value can be specified in the value attribute of the corresponding icon.
.badge:after{
content:attr(value);
font-size:12px;
background: red;
border-radius:50%;
padding:3px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa badge" style="font-size:24px" value=5></i>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
