Introduction
Every eCommerce website, need to display the number of items the customer has put into the shopping cart. Let me show you how easy it is to display this using a bit of html and CSS.
STEP 1 Include the font awesome stylesheet CDN
We need this to get the awesome font image for the shopping cart. Include this in the <HEAD> section of your html page.
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
STEP 2 lets write the style for the badge using CSS
A badge is the round circle with the number of items the customer have added to the shopping cart so far.
.badge:after{
content:attr(value);
font-size:12px;
color: #fff;
background: red;
border-radius:50%;
padding: 0 5px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}
Explanation :
We will display the value passed to the badge, the value here is the number of items in the cart. we are using white font color, with a background of red. We are using :after to indicate we want the badge to be displayed after displaying the cart icon.
STEP 3 Writing the html portion
<i class="fa badge fa-lg" value=5></i>
<i class="fa badge fa-lg" value=8></i>
Explanation :
We using html list item i to display the cart. we are displaying the cart icon with a font size of 24px.
 is for the shopping bag
 is for the shopping cart
You can find more free font awesome codes by clicking this link
I have included the entire code here
<html>
<head>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
</head>
<body>
<style>
.badge:after{
content:attr(value);
font-size:12px;
color: #fff;
background: red;
border-radius:50%;
padding: 0 5px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}
</style>
<body>
<i class="fa badge fa-lg" value=5></i>
<i class="fa badge fa-lg" value=8></i>
</body>
</html>
Conclusion
With simple HTML and CSS, we can build an awesome display for the shopping cart icon with items in it. Note, you will have to use either PHP or .JS in real scenario to provide the number of items as they cannot be static as shown in the above example.
Top comments (0)