How can I use a `comment` fa-icon and a text div to display the number of messages a user has?

Question

I would like to create a message-counter that would look similar to this link , using only CSS and HTML.

Let's assume that I have the means of injecting the number of messages using AngularJS, and that I use this code: <i class="fa fa-comment-o"></i> to present the message icon. How can I overlay it with a span and put the span element precisely in the corner?

Answer 1

you can use something like below. It's a span (positioned relative), contains the icon and another span which is then positioned absolute.

<span class="count-icon">
    <i class="fa fa-2x fa-comment"></i>
    <span class="count">3</span>
</span>

And the CSS:

.count-icon {
    display: inline-block;
    position: relative;
}

.count {
    position: absolute;
    top: 0;
    right: 0;

    height: 16px;
    width: 16px;

    background: red;
    border-radius: 8px;

    font-size: 12px;    
    text-align: center;
}

See fiddle: http://jsfiddle.net/mX45f/

Answer 2

To take it a step further than Michael Rose's answer.

You can do this without any additional markup at all

JSFiddle

HTML

<i class="fa fa-2x fa-comment"></i>

CSS

i {
    position: relative;
}
i.fa-comment:after {
    position: absolute;
    content:"3";
    top: 0;
    right: 0;    
    height: 16px;
    width: 16px;    
    background: red;
    border-radius: 8px;    
    font-size: 12px;    
    text-align: center;
}