Font Awesome Shopping Basket (Cart, Hamper, Grocery)

In this tutorial, we will explore how to use the Font Awesome Shopping Basket icon in your web projects. This icon is commonly associated with shopping carts, hampers, and groceries. It's also recognized as "fa fa-shopping-basket." you will modify its color , size and animation in try it editor

Fontawesome Version 4.X

shopping basket

<i class='fa fa-shopping-basket'></i>

shopping basket

<i class='fa fa-shopping-basket' style='color: white'></i>

shopping basket

<i class='fa fa-shopping-basket' style='color: red'></i>

shopping basket

<i class='fa fa-shopping-basket' style='color: blue'></i>

shopping basket

<i class='fa fa-shopping-basket' style='color: #f3da35'></i>
Try it Yourself


Fontawesome Version 5.X

shopping basket

<i class='fas fa-shopping-basket'></i>

shopping basket

<i class='fas fa-shopping-basket' style='color: white'></i>

shopping basket

<i class='fas fa-shopping-basket' style='color: red'></i>

shopping basket

<i class='fas fa-shopping-basket' style='color: blue'></i>

shopping basket

<i class='fas fa-shopping-basket' style='color: #f3da35'></i>
Try it Yourself

How to add Font Awesome shopping basket Icon ?

Font Awesome Icon fa fa shopping basket Icon can be added to any web page simply as below. You can integrate Icon in web pages by just adding following below syntax & icon code.

Icon -
<i class='fa fa-shopping-basket'></i>
Icon Code -
fa fa-shopping-basket

HTML Code

Get complete html code for icon shopping basket

                    
                    <!DOCTYPE html>
                    <html>
                        <head>
                        <title>Page Title</title>
                        <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 fa-shopping-basket'></i>
                        </body>
                    </html>                    

Tags

cart,hamper ,grocery,shopping,checkout,check,basket,bag,Commerce

Change Font Awesome Icon Shopping basket Color

Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.


    <style>
.blue-color {
color:blue;
}
.green-color {
color:green;
}
.teal-color {
color:teal;
}
.yellow-color {
color:yellow;
}
.red-color {
color:red;
}
</style>
<i class='fa fa-shopping-basket blue-color'></i> <i class='fa fa-shopping-basket green-color'></i> <i class='fa fa-shopping-basket teal-color'></i> <i class='fa fa-shopping-basket yellow-color'></i> <i class='fa fa-shopping-basket red-color'></i>

Output of the above example will be as below-


Note- Make Sure You have included the below Font Awesome file in header-
            
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>            
            
Related Icons

Shopping Basket Icon Font Awesome - FAQs

⭐What is the Font Awesome Shopping Basket Icon code?

Icon Code is - fa fa-shopping-basket.

⭐ What does the fa fa-shopping-basket Icon mean?

fa fa-shopping-basket is the Icon code of Font Awesome Shopping Basket.

⭐ Can we add fa fa-shopping-basket Icon in different sizes?

Yes, you can Icon of fa fa-shopping-basket in various pixels.

⭐ How to add a Blue color Font Awesome Shopping Basket Icon?

Add the blue color Shopping Basket icon of the font awesome by using code: fa fa-shopping-basket style='color: blue;'.

⭐ How to make white color icon of a Font Awesome Shopping Basket?

To change the Shopping Basket icon to white color use code: fa fa-shopping-basket style='color: white;'.

Advertisements



Advertisements



Looking For More Icons?