Skip to content Skip to sidebar Skip to footer
Home / Css / Font Awesome / Html

How To Put The Number At Top Right Corner Of Cart Icon?

Post a Comment
I would like to place a number at top right corner of the font awesome cart icon. I have created this simple html.

Solution 1:

This appears to have been answered previously: Shopping cart - number of items in cart CSS

Modified the code to suit your request: http://jsfiddle.net/LhrLe0j6/361/

<iclass="fa"style="font-size:24px">&#xf07a;</i><spanclass='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: 05px;
    vertical-align: top;
    margin-left: -10px; 
}

Solution 2:

You can achieve the same thing without the extra span tag using the pseudo elements of the same i tag. The value can be specified in the value attribute of the corresponding icon.

.badge:after{
content:attr(value);
font-size:12px;
background: red;
border-radius:50%;
padding:3px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}
<linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><iclass="fa badge"style="font-size:24px"value=5>&#xf07a;</i>

Solution 3:

Warp the elements with a div like this,

<style>.wrapper{
position: relative;
}
.wrapperspan{
position: absolute;
top: -2px;
right: -2px; 
}

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

Solution 4: 

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><metaname="viewport"content="width=device-width, initial-scale=1"><style></style><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><iclass="fa"style="font-size:24px">&#xf07a;</i><span> 5 </span></body></html>

Post a Comment for "How To Put The Number At Top Right Corner Of Cart Icon?"