DEV Community

Cover image for CSS Shopping cart Icon with number of items.
Vinod Devasia
Vinod Devasia

Posted on

36 2

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay