css 如何把数字放在购物车图标的右上角？

ylamdve6 于 2022-12-05 发布在其他

关注(0)|答案(4)|浏览(263)

我想在右上角的字体真棒购物车图标的地方。
我创建了这个简单的html。

<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    </style>
    <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" style="font-size:24px">&#xf07a;</i>
    <span> 5 </span>

    </body>
    </html>

结果如下。

如何使编号显示在购物车图标的右上角，如下图所示？

感谢cssMaven的任何帮助。谢谢！

css

来源：https://stackoverflow.com/questions/51304169/how-to-put-the-number-at-top-right-corner-of-cart-icon

4条答案

按热度按时间

izkcnapc1#

这似乎在以前已经得到了回答：Shopping cart - number of items in cart CSS
已修改代码以满足您的要求：http://jsfiddle.net/LhrLe0j6/361/

<i class="fa" style="font-size:24px">&#xf07a;</i>
<span class='badge badge-warning' id='lblCartCount'> 5 </span>

CSS：

.badge {
  padding-left: 9px;
  padding-right: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

.label-warning[href],
.badge-warning[href] {
  background-color: #c67605;
}
#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-left: -10px; 
}

赞(0）回复(0）举报 2022-12-05

tkclm6bt2#

您可以使用同一个i标签的伪元素来实现相同的功能，而无需额外的span标签。
第一个

赞(0）回复(0）举报 2022-12-05

h9vpoimq3#

使用div变形元素，如下所示：
第一个

赞(0）回复(0）举报 2022-12-05

1mrurvl14#

第一个

赞(0）回复(0）举报 2022-12-05