I've been trying to place a badge over a fontawesome icon, but I'm having trouble aligning it properly. No matter what I do, it always seems to end up either above or below the icon. My goal is to have the badge shown directly on top of the icon.
If anyone can provide some insight into what I might be overlooking, I would greatly appreciate it.
Thank You!
@import url('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
.menutoggle {
float: left;
width: 50px;
height: 52px;
font-size: 22px;
cursor: pointer;
color: #1d2939;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
-moz-transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
transition: all 0.2s ease-out 0s;
}
.menutoggle i {
padding:15px;
padding-bottom:0px;
}
.menutoggle:hover {
color: #1d2939;
background-color: #f7f7f7;
}
.badge{
display:inline-block;
min-width:10px;
padding:3px 7px;
font-size:12px;
font-weight:700;
line-height:1;
color:#fff;
text-align:center;
white-space:nowrap;
vertical-align:baseline;
background-color:#777;
border-radius:10px
}<ul>
<li>
<div class="menutoggle">
<i class="fa fa-cog"></i>
<span class="badge">1</span>
</div>
</li>
</ul>