在许多网站上，我们都可以看到一个购物车的小图标，这表示我们已经添加了一些商品到购物车中。这个小图标的样式是使用CSS来定义的。

.shopping-cart {width: 50px;height: 50px;background-color: #F5A623;border-radius: 50%;position: relative;cursor: pointer;}.shopping-cart:before,.shopping-cart:after {content: "";position: absolute;background-color: white;}.shopping-cart:before {width: 40px;height: 4px;top: 50%;margin-top: -2px;left: 50%;margin-left: -20px;}.shopping-cart:after {width: 20px;height: 20px;border-radius: 50%;top: -85%;right: -10%;}

首先，我们定义了一个名为.shopping-cart的类，设置它的宽度、高度、背景颜色和圆角。我们使用相对定位（position: relative）并设置了光标（cursor: pointer），这是为了方便用户点击购物车图标。

接着，我们使用:before和:after伪元素来创建购物车图标的线和圆形表示。使用position: absolute来确保它们位于购物车图标中间。

通过前面的CSS代码，我们可以得到一个简单的购物车小图标。当然，我们还可以通过其他的CSS技巧来定义更加漂亮的购物车小图标，如动画效果等等。

在实际的网站开发中，购物车小图标通常是与JavaScript代码结合使用，使其具有交互功能，如点击弹出购物车列表，显示已经添加的商品等等。