Html 如何将号码放在购物车图标的右上角？_Html_Css_Font Awesome

Html 如何将号码放在购物车图标的右上角？

html css

Html 如何将号码放在购物车图标的右上角？,html,css,font-awesome,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://c

我想在字体的右上角放置一个数字

我创建了这个简单的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>


；
5.

结果如下

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

我感谢css专家的帮助。谢谢

span{
字体大小：14px；
字号：900；
位置：绝对位置；
边框：纯蓝色；
边界半径：60%；
高度：14px；
宽度：8px；
背景：蓝色；
}


；
5.

这似乎已经在前面得到了回答：

修改代码以满足您的请求：

您可以使用相同

标记的伪元素实现相同的功能，而无需额外的span标记。该值可以在相应图标的

value

属性中指定

.badge:之后{
内容：attr（value）；
字体大小：12px；
背景：红色；
边界半径：50%；
填充：3倍；
位置：相对位置；
左：-8px；
顶部：-10px；
不透明度：0.9；
}


使用这样的div扭曲元素
<style>

.wrapper{
position: relative;
}
.wrapper span{
position: absolute;
top: -2px;
right: -2px; 
}

</style>

<body>

<div class="wrapper">
<i class="fa" style="font-size:24px">&#xf07a;</i>
<span> 5 </span>
</div>

</body>


.包装纸{
位置：相对位置；
}
.包装跨度{
位置：绝对位置；
顶部：-2px；
右：-2px；
}
；
5.
分享您的代码并展示您尝试过的关于位置属性的内容。我知道如何放置在图像顶部。如何在元素顶部放置？谢谢！是否可以像图中所示那样重叠一点。
.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; 
}

<style>

.wrapper{
position: relative;
}
.wrapper span{
position: absolute;
top: -2px;
right: -2px; 
}

</style>

<body>

<div class="wrapper">
<i class="fa" style="font-size:24px">&#xf07a;</i>
<span> 5 </span>
</div>

</body>