html - Making a notification icon with notification count

Question

I want to make a notification icon on my website like facebook. Facebook shows you notification icon on the top left corner. On facebook, there is number of notifications beside the icon. I want to make the same thing. I want to show the number of notifications beside the notification icon just like facebook. I have created this code for this:

<style>
    .icon {
        width:30px; 
        height:30px;
    }
    .txt {
        padding:-10px 0 0 10px;
        background:red; 
        font-size:xx-small;
    }
</style>

<div class="icon">
    <img src="icon.bmp" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

But it is not happening. Please anyone help me how can I make it same like facebook. Thank You.

Answer 1

Just use position: relative; for the icon and position: absolute; for the text. Define the distance to the icon with top and left.

.icon {
    width:30px; 
    height:30px;
    position: relative;
}
.txt{
    background-color:red;
    font-size:xx-small;
    position: absolute;
    padding:2px;
    top: 5px;
    left: 5px;
    border-radius: 25px;
}

<div class="icon">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d" alt="none" width="100%" height="100%" />
    <div class="txt">10</div>
</div>

I would also define the icon as a background image of .icon with css and remove the img tag.