TheLazy.Dev
Portfolio GitHub

Blog

css |shoppingcart |header |icon

CSS Shopping cart Icon with number of items.

vinodsys

Vinod Devasia

Posted on December 21, 2021

CSS Shopping cart Icon with number of items.

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.

shopping cart icon

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">
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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>&#xf290;</i>
<i class="fa badge fa-lg" value=8>&#xf07a;</i>
Enter fullscreen mode Exit fullscreen mode

Explanation :

We using html list item i to display the cart. we are displaying the cart icon with a font size of 24px.

&#xf290; is for the shopping bag
&#xf07a; 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>&#xf290;</i>

<i class="fa badge fa-lg" value=8>&#xf07a;</i>



</body>

</html>
Enter fullscreen mode Exit fullscreen mode




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.

💖 💪 🙅 🚩
vinodsys
Vinod Devasia

Posted on December 21, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

CSS Shopping cart Icon with number of items.
css CSS Shopping cart Icon with number of items.

December 21, 2021