如何将数字放在购物车图标的右上角？
kof*_*rts 11 html css font-awesome
我想在字体真棒购物车图标的右上角放置一个数字。
我已经创建了这个简单的 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"></i>
<span> 5 </span>
</body>
</html>
结果如下。
如何让数字出现在购物车图标的右上角，如下图所示？
我感谢 css 专家的任何帮助。谢谢！
Tat*_*Gun 24
这似乎以前已经回答过： 购物车 - 购物车 CSS 中的商品数量
修改了代码以满足您的要求：http : //jsfiddle.net/LhrLe0j6/361/
<i class="fa" style="font-size:24px"></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;
}
您可以使用相同i标签的伪元素在没有额外 span 标签的情况下实现相同的目标。该值可以value在相应图标的属性中指定。
.badge:after{
content:attr(value);
font-size:12px;
background: red;
border-radius:50%;
padding:3px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa badge" style="font-size:24px" value=5></i>