代码之家 › 专栏 › 技术社区 › kofhearts

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

font-awesome css html

kofhearts · 技术社区 · 6 年前

我想在字体可怕的购物车图标的右上角放置一个数字。

我创建了这个简单的HTML。

<!文档类型HTML>
<HTML>
<头部>
<meta name=“viewport”content=“width=device width,initial scale=1”>
<样式>
</style>
<link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/font-awome/4.7.0/css/font-awome.min.css”>
</head>
<正文>

<i class=“fa”style=“font-size:24px”>&xf07a;</i>
<SPAN>5</SPAN>

</body>
</html>
结果如下。




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



感谢CSS专家的帮助。谢谢!

结果如下。



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



感谢CSS专家的帮助。谢谢!

4 回复 | 直到 6 年前

TattooedGun 6 年前

这似乎是以前回答过的: 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; 
}

samuellawrentz 6 年前

您可以使用相同的伪元素在不使用额外的跨度标记的情况下实现相同的功能。 i 标签。该值可以在 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>&#xf07a;</i>

B G Hari Prasad 6 年前

用这样的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>

godfather 6 年前

span{
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    border: solid blue;
    border-radius: 60%;
    height: 14px;
    width: 8px;
    background:blue;
}

<!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>