如何将数字放在购物车图标的右上角? [英] How to put the number at top right corner of cart icon?
本文介绍了如何将数字放在购物车图标的右上角?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在真棒购物车图标的右上角放置一个数字.
I would like to place a number at top right corner of the font awesome cart icon.
我创建了这个简单的html.
I have created this simple 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>
结果如下.
如何使数字显示在购物车图标的右上角，如下图所示?
How can i make the number appear the top right corner of the cart icon as shown in the following image?
我非常感谢CSS专家的任何帮助.谢谢！
I appreciate any help from css experts. Thanks!
推荐答案
以前似乎已经回答过:购物车-CSS中购物车中的商品数量
This appears to have been answered previously: Shopping cart - number of items in cart CSS
修改了代码以适合您的要求: http://jsfiddle.net/LhrLe0j6/361/
Modified the code to suit your request: 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;
}
这篇关于如何将数字放在购物车图标的右上角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
